概述本项目基于Vue.js，成品为手机音乐播放器，出自imooc实战教程。自己动手修改。项目的大致流程是用Vue-cli搭建开发环境，分析需求，设计思路，规划目录结构，开始编码。视图层推荐页面歌手页面歌手详情歌曲排行榜详情搜索页面用户中心数据源所有数据均来自QQ音乐，从QQ接口抓取，大部分接口为JSONP，抓取相对容易，部分主机为受限，不能直接抓取。使用的方法是使用axios代理，设置header绕过host限制。PS：具体代码请参考prod.server.js文件。技术栈VueVuexVue-RouterVue-cliStylusAxiosESlintBetter-scrollsrc目录结构难点播放器组件先说播放器播放器组件。播放器组件是整个项目的核心，当然数据处理和用户体验方面也不简单（转义。播放器是一个全局组件，放在App.vue下，通过Vuex传递数据，触发action提交mutation，这样播放器就开始工作了。当然，数据交互也不是很复杂，需要多花一点时间来理解，播放器组件是由多个基础组件组成的，具体可以参考项目代码。为防止切换歌曲时点击过快导致歌曲播放错误，结合Vuex使用audio的onplayAPI获取数据，只有判断当前歌曲数据请求后才能切换到下一首歌曲接收到，判断函数如下：ready(){this.songReady=true}通过调用QQ音乐的JSONP接口进行数据处理，获取到的数据不能直接使用，需要进一步标准化满足要求我们使用，所以在这方面封装了一个单独的类来处理这方面的数据。详情请参考src/common/js/song.js。请求JSONP时，一个JSONP库，这个库的代码很短，只有几十行，有兴趣的同学可以学习一下。使用的时候就是在请求url上拼接请求参数，然后调用这个库的jsonp方法。所以，这里封装了两个功能，一个是在url上拼接参数，一个是Promise库中的jsonp方法，方便我们使用。详情请参考src/common/js/jsonp.js。将请求的数据格式化后通过Vuex传递，组件间共享，实现歌曲播放切换等。本项目交互体验中很多地方都涉及到滚动，包括下拉滚动，下拉滚动刷新等等.这里使用一个库(better-scroll)来实现所有涉及的滚动。推荐学习其API。其他的动画还有Vue的过渡动画，路由切换时的简单动画，播放器打开时的动画。这个地方比较难，但也比较好玩。打开页面时的Loading效果其实就是一个Loading组件，比较简单。为了减少流量，图片加载采用了懒加载的方式，滚动时加载真实图片。具体效果请自行体验：）效果搭建开发环境#installdependenciesnpminstall#servewithhotreloadatlocalhost:8080npmrundev#rune2etestsnpmrune2e#runalltestsnpmtestproductionenvironment#buildforproductionwithminificationnpmrunbuild#runnodeprod.server.js总结通过研究这个项目，收获颇丰。在实践中也遇到了很多大大小小的问题，最后通过断点调试解决了。这无疑是对我最大的鼓励，希望能与大家一起分享学习。项目地址：https://github.com/k-water/vue-music喜欢就点个赞吧：）
