http://mp.weixin.qq.com/s/KpXT9X46AMlUVXQvpHuXGQ
效果图：
实现的功能
1、首页
2、底部播放控件
3、播放页面
4、播放列表
5、排行榜
6、音乐搜索
输入搜索关键词，点击放大镜图标
7、侧边栏
目录结构
开发心得与总结
1、轮播图
首先感谢作者ShanaMaid/vue-image-scroll开源的代码，我把代码copy下来自己进行了一点修改(没有手指滑动效果)，因为这是移动端，少不了的手指滑动切换，所以添加了vue-touch(偷偷告诉你，vue-touch的next分支还是支持vue2.0的)。
地址：https://github.com/hzzly/MagicMusic/blob/master/src/components/banner.vue
2、歌曲操作(喜欢，分享，加入播放列表)动画、播放列表展开与删除歌曲动画Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡
条件渲染 （使用 v-if）
条件展示 （使用 v-show）
动态组件
组件根节点
transition-group一组过度动画，这里有个小坑的，之前看官网列表过渡的栗子，给每一项设置唯一的key值，一般都会用index。所以在做的时候就把index传给key，结果过渡老是不对，后来换成对应的item就正常了(生无可恋脸)。
3、直线进度条、弧形进度条
西班牙建筑大师曾说过：“直线属于人类，曲线则归于上帝”。在这里我大胆的使用了弧形来作为进度条，(几大热门音乐APP貌似还没有弧形进度条)。
这里我用到了Vue的绑定内联样式
4、本地存储
将一些数据缓存到localStorage，可以减少Http请求，从而优化页面加载时间。
在这个项目中首页歌曲列表以及搜索历史用到了本地缓存，拿搜索历史来举栗：
5、图片懒加载
使用了vue-lazyload插件
用法：
6、歌词滚动与高亮
因为api提供的歌词包括时间，如：
[03:57.280]原谅我这一生不羁放纵爱自由
所以首先要进行字符串切割：
然后在播放的监听事件中与播放的当前做对比：
到这就ok了
7、VUEX状态管理
推荐官方调试工具 devtools extension
之前看到好多人写的vuex，把整个项目的数据放到了一个state里，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。
所以我建议(个人见解，轻喷)：将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters。这样方便管理与后期的维护。
车已到站✌️。
不知不觉写了这么多，老铁们凑合这看吧，觉得还行的可以点赞，需要完整代码练习的加群453833554： 已经上传到群文件。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/113860.html原文链接：https://javaforall.net
