VUE MUSIC仿QQ音樂客戶端

Music Player

基於Vue的音樂播放器

• 訪問github查看更多：https://github.com/tian0o0/QQ...

• QQ音樂播放源過一段時間就會更改，所以示例中的歌曲可能沒法播放，若是你們有好用的播放源還但願能分享下，傷不起呀
• 這個demo依然有許多隱藏的bug，還有許多功能待完善，抱着學習的態度我會一直更新完善它，若是你們發現這個player有什麼問題能夠發issue或是PR，我會盡可能改正的，也歡迎star~~~

手機掃一掃預覽：

1、播放器基本功能

• [x] 歌曲播放、切歌、進度控制
• [x] 三種播放模式的切換
• [x] 搜索歌手、歌曲
• [x] 上拉加載功能
• [x] 模擬登陸跳轉
• [x] 收藏歌曲

2、概述

• 下面圖片能夠看出，有許多頁面採用了複用的組件，好比推薦歌單頁（圖2）、歌手詳情頁（圖4）、排行榜詳情頁（圖8），同時在這些組件中還有更加細分的基礎組件。這樣能夠高度定製化組件，知足不一樣的需求，提升開發效率。
• 核心是利用vuex作數據的傳遞，方便跟蹤狀態
• Vue-Router實現單頁面路由跳轉
• Vue-lazyLoad實現圖片懶加載
• fastclick解決移動端300ms延遲
• 對搜索框搜索功能進行了節流，減小請求節約流量
• 使用vue提供的異步組件配合webpack的代碼分割實現路由懶加載
• (2017.12.29新增)利用路由元信息的meta字段，經過watch $route動態改變transition的name，實現合理的動態路由切換過渡動畫
• (2017.12.30新增)利用localStorage實現收藏歌曲功能，且該功能需在登陸狀態下操做(未登陸時點擊收藏按鈕會自動跳轉登陸頁)

3、項目結構

│  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                //基礎數據