vue2.0音乐播放器

上手vue.js以后,选择的第一个项目就是音乐播放器,使用qq音乐的api,界面仿腾讯本地音乐播放器“轻听”,功能包括最近播放、添加到喜欢、榜单详情、歌手详情、专辑详情。技术栈基本是vue全家桶,vue-router、vuex、es6特性(正在学习中)、webpack、express......vue

源码

写了不少注释,方便你们参考学习:😁githubwebpack

项目预览:😝轻听 欢迎你们来star~git

高清无码预览图

播放界面

播放颜色

搜索界面

歌单详情

技术栈

  • vuex:用来数据管理真的是一级棒,合理的使用组件的状态共享会事半功倍
  • better-scroll:号称移动端最好用的滚动插件,的却很好用,效果很棒
  • webpack:用来打包、压缩,页面的懒加载能够提高第一次打开的加载速度
  • good-Storage:封装了localStorage,方便使用,保存用户的喜欢列表,搜索历史

总结

  • 数据绑定:vue的响应式系统是基于数据驱动的,计算属性会根据数据的改变而改变DOM节点。节点和计算属性都依赖于数据,处理好这些依赖关系很重要。好比项目中的,添加歌曲到我喜欢,最近播放,删除搜索历史,歌曲切换都会根据数据的改变而改变DOM节点。
  • 组件化:把一个应用拆分红多个组件,各组件有机结合,抽象出基础组件,提升编码效率
  • 数据抓取:qq音乐的api仍是挺明显的,用chrome就能够很容易得到。通常带fcg的就是了

【声明】本项目仅供学习交流,请不要用作任何商业用途,有问题请联系做者

此项目将持续更新完善......敬请关注

相关文章
相关标签/搜索