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： 已經上傳到群文件。