VUE MUSIC仿QQ音乐客户端

Music Player

基于Vue的音乐播放器

• 访问github查看更多：https://github.com/tian0o0/QQ...

• QQ音乐播放源过一段时间就会更改，因此示例中的歌曲可能无法播放，如果大家有好用的播放源还希望能分享下，伤不起呀
• 这个demo依然有许多隐藏的bug，还有许多功能待完善，抱着学习的态度我会一直更新完善它，如果大家发现这个player有什么问题可以发issue或是PR，我会尽量改正的，也欢迎star~~~

手机扫一扫预览：

一、播放器基本功能

• [x] 歌曲播放、切歌、进度控制
• [x] 三种播放模式的切换
• [x] 搜索歌手、歌曲
• [x] 上拉加载功能
• [x] 模拟登录跳转
• [x] 收藏歌曲

二、概述

• 下面图片可以看出，有许多页面采用了复用的组件，比如推荐歌单页（图2）、歌手详情页（图4）、排行榜详情页（图8），同时在这些组件中还有更加细分的基础组件。这样可以高度定制化组件，满足不同的需求，提高开发效率。
• 核心是利用vuex做数据的传递，方便跟踪状态
• Vue-Router实现单页面路由跳转
• Vue-lazyLoad实现图片懒加载
• fastclick解决移动端300ms延迟
• 对搜索框搜索功能进行了节流，减少请求节约流量
• 使用vue提供的异步组件配合webpack的代码分割实现路由懒加载
• (2017.12.29新增)利用路由元信息的meta字段，通过watch $route动态改变transition的name，实现合理的动态路由切换过渡动画
• (2017.12.30新增)利用localStorage实现收藏歌曲功能，且该功能需在登录状态下操作(未登录时点击收藏按钮会自动跳转登录页)

三、项目结构

│  App.vue                  //组件入口
│  main.js                  //js入口
│  
├─api                       //获取数据的文件
│      config.js                //公共配置
│      deslist.js               //热门歌单数据
│      lyric.js                 //歌词数据
│      rank.js                  //排行榜数据
│      rankDetail.js            //榜单详情数据
│      recommend.js             //轮播图数据
│      recommendDetail.js       //热门歌单详情数据
│      result.js                //搜索结果数据
│      search.js                //热搜关键词数据
│      singerdetail.js          //歌手详情数据
│      singerlist.js            //歌手列表数据
│      
├─baseComponents            //公用基础组件
│  ├─cannotfind                 
│  │      cannotfind.vue        //搜索结果为空
│  │      
│  ├─circleProgress
│  │      circleProgress.vue    //环形进度条
│  │      
│  ├─input
│  │      input.vue             //搜索框
│  │      
│  ├─loading
│  │      loading.svg
│  │      loading.vue           //加载中
│  │      
│  ├─music
│  │      music.vue             //歌单列表
│  │      
│  ├─progress
│  │      progress.vue          //进度条
│  │      
│  ├─scroll
│  │      scroll.vue            //better-scroll的封装
│  │      
│  ├─slider
│  │      slider.vue            //轮播图
│  │      
│  └─songRank
│          songrankcomplex.vue  //榜单歌曲排序
│          songranksimple.vue   //普通歌曲排序
│          
├─common                    //js工具库、样式、字体
│  ├─iconfont
│  │      demo.css
│  │      demo_fontclass.html
│  │      demo_symbol.html
│  │      demo_unicode.html
│  │      iconfont.css
│  │      iconfont.eot
│  │      iconfont.js
│  │      iconfont.svg
│  │      iconfont.ttf
│  │      iconfont.woff
│  │      
│  ├─js
│  │      config.js             //项目相关配置
│  │      dom.js                //DOM操作方法
│  │      jsonp.js              //jsonp的封装
│  │      mixins.js             //vue提供的复用功能
│  │      prefixStyle.js        //js中操作DOM添加前缀
│  │      singer.js             //Singer类
│  │      song.js               //Song类
│  │      localstorage.js       //自制vue的localstorage插件
│  │      utils.js              //函数工具库
│  │      
│  └─stylus                 //stylus文件
│          base.styl
│          index.styl
│          mixin.styl
│          myicon.styl
│          reset.styl
│          variable.styl
│          
├─components                //业务组件
│  ├─header             
│  │      header.vue            //公用头部
│  │      logo@2y.png
│  │      logo@3y.png
│  │      
│  ├─player                     
│  │      player.vue            //播放器组件
│  │      
│  ├─rank                       
│  │      rank.vue              //排行榜组件
│  │      
│  ├─rankDetail
│  │      rankDetail.vue        //排行榜详情组件
│  │      
│  ├─recommend
│  │      recommend.vue         //首页
│  │      
│  ├─recommendDetail
│  │      recommendDetail.vue   //首页详情组件
│  │      
│  ├─result
│  │      result.vue            //搜索结果组件
│  │      
│  ├─search
│  │      search.vue            //搜索页组件
│  │      
│  ├─singer
│  │      singer.vue            //歌手列表组件
│  │      
│  ├─singerDetail
│  │      singerDetail.vue      //歌手详情组件
│  │      
│  ├─song
│  │      song.vue              //歌曲组件
│  │
│  ├─login
│  │      login.vue             //登录组件
│  │      
│  ├─person
│  │      person.vue            //个人中心     
│  └─tab
│          tab.vue              //头部导航组件
│          
├─router                    //路由配置
│      index.js
│      
└─vuex                      //vuex配置
        actions.js              //dispatch
        getters.js              //计算state数据
        index.js                //vuex入口
        mutations-types.js      //mutations常量
        mutations.js            //commit
        state.js                //基础数据