Vue音乐播放器2.0升级版来了

Vue.js音乐播放器2.0

以前初学Vue作了一个音乐播放器，受到很多人的喜欢。如今升级版来了！功能更强，技术栈更多：Vue2.0、Vuex、vue-router、axios、SASS(SCSS)、Express(上线版本是Koa2)、Webpack、ES六、localStorage(HTML5)CSS3...

源代码

源代码地址：👉 GitHub
欢迎你们star和follow😄

预览

在线预览

在线预览地址：👉 Vue音乐播放器
低版本浏览器可能有兼容性问题

预览图

Vue音乐播放器升级版 microzz

更多预览图请看👉 更多

技术栈

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复制代码

遇到的问题

1. vuex何时使用，如何使用，就要看项目须要。引用 Redux 的做者 Dan Abramov 的话说就是：

   Flux 架构就像眼镜：您自会知道何时须要它。

   各组件之间状态共享也是难点。

2. 异步编程：JS是单线程，异步编程尤其重要。当咱们向后端请求数据，是异步的，若是没有处理好相关的异步操做，是会有各类问题的。JS能够利用setTimeout、回调、Generator、Promise、Async。
   定时这种方式太麻烦，仍是不推荐；回调层次多了，有回调地狱，代码维护性不好；Generator须要手动去执行，固然可使用相似co的模块。相比之下Promise和Async是比较理想的。(详看👉Promise对象、异步操做和Async函数)

3. 本项目中使用了QQ音乐和One(一个)的接口，后端API编写也是难点，包含了各类异步请求。对返回数据的解析也是难点，有的时候你还须要对数据进行解码。
4. 各组件结构的设计：一开始大纲没设计好，后面想修改涉及面会很广。
5. 过渡动画让交互更有趣，可是有的仍是耗性能的，有设备差别，没用好会形成卡顿。

【声明】：本项目仅供学习交流，请不要用作任何商业用途😊有任何疑问请联系做者📩zhaohui@microzz.com

About

源代码地址：👉 GitHub
我的网站：🔗microzz-IT技术分享
GitHub：🔗microzz