microzz / Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729
Projects that are alternatives of or similar to Vue Music Player
Vue Cnode
🔥Vue.js打造一个开源的CNode社区。CNode by Vue.js
Stars: ✭ 249 (-65.84%)
Mutual labels: webpack, axios, vuex, scss, sass, html5, vuejs2, vue-router, vue2, css3
Vue Home
🏠 A simple project(Vue Community SPA) which bases on vue+vue-cli+vue-router+axios+ scss.
Stars: ✭ 256 (-64.88%)
Mutual labels: webpack, axios, vuex, scss, vuejs2, vue-router, vue2
Vue Qq
🎨 Vue family bucket with socket.io and express/koa2 , create a web version of mobile QQ, supporting real-time group chat, real-time private chat, special care, shielding chat, smart IP geographic location, real-time display temperature and other QQ core functions
Stars: ✭ 861 (+18.11%)
Mutual labels: axios, vuex, html5, vue-router, vue2, css3
Github Ranking
🔍GitHub不同语言热门项目排行，Vue.js做页面展示
Stars: ✭ 160 (-78.05%)
Mutual labels: webpack, axios, html5, vuejs2, vue2, css3
Vue Shiyanlou
😘基于vue2和vuex的复杂单页面应用，20+页面53个API（仿实验楼）✨✨
Stars: ✭ 342 (-53.09%)
Mutual labels: webpack, vuex, html5, vue-router, vue2, css3
Vue2 Study
vue 的webpack配置,按需加载,element-ui,vuex
Stars: ✭ 16 (-97.81%)
Mutual labels: webpack, axios, vuex, vue-router, vue2
Manhuaren
vue2.0全家桶，仿漫画人官网（移动端）
Stars: ✭ 18 (-97.53%)
Mutual labels: webpack, vuex, sass, vuejs2, vue-router
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (-31.82%)
Mutual labels: webpack, vuex, vuejs2, vue-router, vue2
Vue Spa
vue-spa ： vue + vue-router + axios + vuex + vux 快速成型移动端项目，直接使用。欢迎star
Stars: ✭ 46 (-93.69%)
Mutual labels: webpack, axios, vuex, sass, vue-router
Vuedemo sell eleme
ele by vue2.x 🐧
Stars: ✭ 1,349 (+85.05%)
Mutual labels: webpack, axios, vuex, vue-router, vue2
Vue Meizi
vue最新实战项目，vue2 + vuex + webpack + es6 干货多多，新手福利
Stars: ✭ 1,476 (+102.47%)
Mutual labels: webpack, vuex, html5, vue-router, css3
Vue Video
vue + vue-router + vuex + (fetch->axios)
Stars: ✭ 251 (-65.57%)
Mutual labels: webpack, axios, vuex, sass, vue-router
Vue Cli Multi Page
基于vue-cli模板的多页面多路由项目，一个PC端页面入口，一个移动端页面入口，且有各自的路由， vue+webpack+vue-router+vuex+mock+axios
Stars: ✭ 145 (-80.11%)
Mutual labels: webpack, axios, vuex, vue-router, vue2
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (-58.71%)
Mutual labels: webpack, axios, vuex, vuejs2, vue-router
Vue Chat
👥Vue全家桶+Socket.io+Express/Koa2打造一个智能聊天室。
Stars: ✭ 887 (+21.67%)
Mutual labels: vuex, scss, vuejs2, vue-router, vue2
Vue2 Demo
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
Stars: ✭ 2,072 (+184.22%)
Mutual labels: webpack, vuex, vuejs2, vue-router, vue2
Cordova Template Framework7 Vue Webpack
Framework7 - Vue - Webpack Cordova Template with Webpack Dev Server and Hot Module Replacement
Stars: ✭ 630 (-13.58%)
Mutual labels: webpack, vuex, vuejs2, vue2
Vue.js音乐播放器2.0升级版
之前初学Vue做了一个音乐播放器，受到不少人的喜欢。现在升级版来了！功能更强，技术栈更多。
源代码
源代码地址：👉 GitHub 欢迎大家star和follow😄
预览
在线预览
在线预览地址：👉 Vue音乐播放器
预览图
更多预览图请看👉 更多
技术栈
Vue2：采用最新Vue2的语法😁
Vuex：实现不同组件之间的状态共享✌️
vue-router：单页应用路由管理必备😎
axios：发起http请求😉
SASS(SCSS)：css预处理语言💪
Express(上线版本是Koa2)：因为vue-cli是用的Express做服务器，所以开源的开发版本是Express，自己生产环境用的是Koa2。 😜
Webpack：自动化构建工具，大部分配置vue-cli脚手架已经弄好了，很方便。😏
ES6：采用ES6语法，这是趋势。👏
localStorage(HTML5)：本地存储，保存用户个性化设置。😊
CSS3：CSS3动画及样式。👍
使用 Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
遇到的问题
- vuex什么时候使用，如何使用，就要看项目需要。引用 Redux 的作者 Dan Abramov 的话说就是：
Flux 架构就像眼镜：您自会知道什么时候需要它。
各组件之间状态共享也是难点。
- 异步编程：JS是单线程，异步编程尤为重要。当我们向后端请求数据，是异步的，如果没有处理好相关的异步操作，是会有各种问题的。JS可以利用
setTimeout、回调、Generator、Promise、Async。 定时这种方式太麻烦，还是不推荐；回调层次多了，有回调地狱，代码维护性很差；Generator需要手动去执行，当然可以使用类似co的模块。相比之下Promise和Async是比较理想的。(详看👉Promise对象、异步操作和Async函数) - 本项目中使用了QQ音乐和One(一个)的接口，后端API编写也是难点，包含了各种异步请求。对返回数据的解析也是难点，有的时候你还需要对数据进行解码。
- 各组件结构的设计：一开始大纲没设计好，后面想修改涉及面会很广。
- 过渡动画让交互更有趣，但是有的还是耗性能的，有设备差异，没用好会造成卡顿。
【声明】：本项目仅供学习交流，请不要用做任何商业用途😊有任何疑问请联系作者📩[email protected]
About
源代码地址：👉 GitHub
个人网站：🔗microzz-IT技术分享
GitHub：🔗microzz
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].