用vue全家桶写一个“以假乱真”的网易云音乐

标题略夸张了，可是这个从ui还原上已经很接近官方版本了。虽然目前这个是不少人造过的轮子，可是可能每一个人的实现方式都不同，本身写一遍也会有许多收获。

项目地址

预览地址

api：ap使用的是一个开源的nodejs封装的网易云音乐api，地址

技术栈

• vue2：基础框架
• vue-router2：路由跳转
• vuex：全局数据管理
• es6：采用部分es6特性，大大简化了写法
• webpack：vue-cli基于webpack，修改了部分配置
• axios：基于Promise的http库，用来请求数据
• scss：写起css来十分方便，须要安装sass-loader，另外使用自定义其中的自定义函数配合rem来适配移动端设备简直不要太方便
• flex：弹性布局，在移动端兼容性较好，写各类布局很是方便
• vue-material：一个Android上material design风格的组件库

说明

1. 这个项目大小组件大概二十几个，目前还未完工，之后还会继续更新，目标是还原整个网易云音乐（虽然不知道何时能填完坑o(╯□╰)o）。
2. 关于路由，刚开始设计路由的时候想了不少，因为一开始的目标就是网易云音乐的全部内容，因此设计了三级路由，/root/index/recommed，大概这样，点击查看。
3. 关于体会，写到这个项目也算是对vue全家桶比较熟了，体会就是，不管是简单的复杂的项目，只要分割成一个个组件再拼起来，也没什么难的，组件之间通讯又有vuex，也是很是简单的，总之就是熟能生巧。
4. 关于难点，对于本身来讲，audio标签之前没有接触过，有点麻烦，不过还算有相关文档；歌词滚动，参考这里，部分歌曲仍是有点问题，待解决;播放器背景图，这个当时考虑了好久，由于网易云音乐的播放器背景图就是当前歌曲的专辑图，仍是模糊效果，最后实现方式是在当前组件的二级div设置当前歌曲的背景图，大小覆盖父元素，为防止第一次播放或者切歌的时候没有图，在组件的根元素也设置一张背景默认图，具体能够点击查看；当前歌曲在播放列表中的索引获取，经过es5中数组的findIndex方法，找到当前歌曲的id在数组中的位置，具体能够点击查看。
5. 关于打包后的资源路径，好比要放在二级目录www.xxx.com/music，那么修改config/index.js中的assetsPublicPath: '/music/'便可。
6. 关于移动设备适配，我使用的是js动态设置html元素font-size的方式，页面元素使用rem，这样可达到在不一样设备下显示内容基本同样的效果，具体能够点击，使用方式好比width:100px;能够写成width:pr(100)。
7. 关于图标，使用的是淘宝的iconfont字体图标方案，相比于使用图片图标有许多优点，好比任意缩放、改变颜色、响应式适配设备等等，具体能够参考这篇文章。

功能

• [x] 首页歌单推荐
• [x] 歌单详情
• [x] 播放器
• [x] 播放暂停
• [x] 播放模式切歌（顺序和随机）
• [ ] 歌词滚动（待修改）
• [x] 歌曲拖动
• [x] 播放器底部背景
• [x] 播放底栏
• [x] 底栏歌词同步
• [x] 播放列表
• [x] 歌曲评论
• [x] 搜索推荐
• [x] 搜索分类

部分截图