用vue全家桶寫一個「以假亂真」的網易雲音樂

標題略誇張了，可是這個從ui還原上已經很接近官方版本了。雖然目前這個是不少人造過的輪子，可是可能每一個人的實現方式都不同，本身寫一遍也會有許多收穫。

項目地址

預覽地址

api：ap使用的是一個開源的nodejs封裝的網易雲音樂api，地址

技術棧

• vue2：基礎框架
• vue-router2：路由跳轉
• vuex：全局數據管理
• es6：採用部分es6特性，大大簡化了寫法
• webpack：vue-cli基於webpack，修改了部分配置
• axios：基於Promise的http庫，用來請求數據
• scss：寫起css來十分方便，須要安裝sass-loader，另外使用自定義其中的自定義函數配合rem來適配移動端設備簡直不要太方便
• flex：彈性佈局，在移動端兼容性較好，寫各類佈局很是方便
• vue-material：一個Android上material design風格的組件庫

說明

1. 這個項目大小組件大概二十幾個，目前還未完工，之後還會繼續更新，目標是還原整個網易雲音樂（雖然不知道何時能填完坑o(╯□╰)o）。
2. 關於路由，剛開始設計路由的時候想了不少，因爲一開始的目標就是網易雲音樂的全部內容，因此設計了三級路由，/root/index/recommed，大概這樣，點擊查看。
3. 關於體會，寫到這個項目也算是對vue全家桶比較熟了，體會就是，不管是簡單的複雜的項目，只要分割成一個個組件再拼起來，也沒什麼難的，組件之間通訊又有vuex，也是很是簡單的，總之就是熟能生巧。
4. 關於難點，對於本身來講，audio標籤之前沒有接觸過，有點麻煩，不過還算有相關文檔；歌詞滾動，參考這裏，部分歌曲仍是有點問題，待解決;播放器背景圖，這個當時考慮了好久，由於網易雲音樂的播放器背景圖就是當前歌曲的專輯圖，仍是模糊效果，最後實現方式是在當前組件的二級div設置當前歌曲的背景圖，大小覆蓋父元素，爲防止第一次播放或者切歌的時候沒有圖，在組件的根元素也設置一張背景默認圖，具體能夠點擊查看；當前歌曲在播放列表中的索引獲取，經過es5中數組的findIndex方法，找到當前歌曲的id在數組中的位置，具體能夠點擊查看。
5. 關於打包後的資源路徑，好比要放在二級目錄www.xxx.com/music，那麼修改config/index.js中的assetsPublicPath: '/music/'便可。
6. 關於移動設備適配，我使用的是js動態設置html元素font-size的方式，頁面元素使用rem，這樣可達到在不一樣設備下顯示內容基本同樣的效果，具體能夠點擊，使用方式好比width:100px;能夠寫成width:pr(100)。
7. 關於圖標，使用的是淘寶的iconfont字體圖標方案，相比於使用圖片圖標有許多優點，好比任意縮放、改變顏色、響應式適配設備等等，具體能夠參考這篇文章。

功能

• [x] 首頁歌單推薦
• [x] 歌單詳情
• [x] 播放器
• [x] 播放暫停
• [x] 播放模式切歌（順序和隨機）
• [ ] 歌詞滾動（待修改）
• [x] 歌曲拖動
• [x] 播放器底部背景
• [x] 播放底欄
• [x] 底欄歌詞同步
• [x] 播放列表
• [x] 歌曲評論
• [x] 搜索推薦
• [x] 搜索分類

部分截圖