该项目来源HuangYi, 之前写过他的eleApp,后来发现这个音乐 App，可惜未开源，还好他的学生把这个项目开源了，所以就有了这个仓库，后面回提到我的一些改进，总结。

当前这家公司使用 Vue，之前接触过 React 和 Ng，所以上手较快,上手就是维护 Vuex 项目，老项目代码写的不是很好，为了进一步理解 Vue，所以就准备找几个好的项目来学习所以就有了eleApp和本项目

数据来源 QQ 音乐 JSONP，部分接口存在 http header 的限制所以用到了 node，托管于 VPS，PM2 部署，Nginx 代理，

二维码地址

备用：项目演示地址 GitHub Pages

201710 - 201801

• macOS High Sierra
• vscode

• Vue @2.3.3, vue-router, vuex, axios
• less (不太习惯 stylus 所以我还是继续使用 less 了)
• ES6 standardjs 规范
• Express
• jsonp axios promise
• Vultr/heroku PM2 Nginx

• master
• lib-flex 添加自适应布局 merge into master √
• ssr 服务端渲染实现 (待完成)

• 基础组件：确认对话框，loading，进度条，搜索框，滚动组件
• 业务组件：歌单详情，播放内核，搜索页面，顶部导航，排行榜等组件
• 上拉刷新，函数防抖动搜索，消除点击延迟，异步路由

• /recommand 推荐页：轮播图，推荐歌单列表
• /singer 歌手页列表：歌手列表展示，左右联动，快速入口，类似通讯录
• /singer/:id 歌手详情页：局部滚动，视差，播放音乐，音乐播放器有的功能都有
• /rank/:id 排行页：同上
• /search 搜索：搜索结果，搜索历史，热门搜索，结果播放
• 播放列表页：当前播放队列
• ~~~用户中心页~~~

• vConsole
• Charles

• animation-play-state: paused ios 不支持解决方案
• min-player 进度条实现
• [email protected]+  ios 不能播放问题

• QQ 音乐 UI
• 适配优化
• 打包优化

• 分块：根据打包后的分析报告进行优化
• 处理 vendor：一般都是这部分体积大，相关类库一般不会变化，所以单独打包和其它文件一样加上 chunkhash 辨别文件是否变化，同时把 manifest 抽离出来，保证 manifest 变化不影响 vendor 变化导致缓存失效,这样默认就是 304，现在我通过 node 把他设置成强缓存了....外加 gzip
• 采用路由懒加载

• 多端同构 webApp, Hybrid，采用 [email protected] （相比以前的版本我更倾向于 2.x）配合 px2rem

• IOS 的 Safari 浏览器和微信 webview 兼容性和适配问题,此应用未调用设备 API

• 打包成 ios Hybrid 系列模拟器正常 如 iphone7 Plus

• webApp && chrome

试了下腾讯的weTest 收费，没继续用

后来发现 GenyMotion 不准备测试

• 截止 20180112 基本完成了我预期的开发(但会在其他分支继续完成其他工作，完成后合并到主分支)，比如滚动库，歌词的处理等是原作者开源项目的，我在这个项目学到的东西主要是学习作者的编程风格，习惯，更好的理解 Vue 中的知识点
• 有了本项目，eleApp，和我工作中的 Vue 开发经验，以及element ui部分源码的阅读，至此已经对 Vue 的使用及特性有了一定的理解，同时我也在阅读 Vue 的一些源代码去深入的理解 Vue，这样会更好的处理开发中遇到的问题
• 如果你还不清楚 Vue 的学习路线，我最近发现了这篇文章可以去看一看，还可以检验自己是否有知识点遗漏的地方，当然这远远还是不够的，Vue 有更多的东西需要自己去探索使用

git clone hhttps://github.com/forzeny/Music-Player.git
$ cd Music-Player
$ yarn install
$ yarn run dev