[vue全家桶]每一個人都能作的網易雲音樂

時間 2019-12-04

標籤 vue 全家每一個人網易音樂欄目應用數學简体版

原文原文鏈接

仿網易雲音樂(webapp)

項目地址 (project address)

api來源感謝binaryify讓我能用喜歡的東西作一個屬於本身的播放器! html

源碼地址不要臉的求star 哈哈哈!!!vue

項目預覽 1mhere.cn (pc端按F12切換手機調試模式效果更佳!)webpack

(移動端可直接掃碼)ios

技術棧 (technology)

vue2.0 + vuex + vue-router2.0 + es6 + axios + vux + less + flex

文件結構 (File structure)

├── build                       構建服務和webpack配置
├── config                      項目不一樣環境的配置
├── dist                        項目build目錄
├── index.html                  項目入口文件
├── package.json                項目配置文件
├── static                       靜態資源
├── src                         生產目錄
    |—— api                     api列表和數據處理
    |——|—— apiList.js           api列表
    |——|—— getData.js           數據處理(封裝一個axios請求)    
    |—— assets                  靜態資源(img,less)
    |——|—— img                  靜態圖片
    |——|—— style                樣式文件  
    |—— components              公用組件
    |——|—— bottomSongList       播放器播放列表組件  
    |——|—— headerNav            頭部導航組件
    |——|—— music                音樂組件
    |—— page                    頁面組件
    |——|—— albumsListDetails    專輯內容組件 
    |——|—— recommend            個性推薦組件
    |——|—— searchList           搜索列表組件
    |——|—— singer               歌手組件
    |——|—— songDetails          歌曲詳情組件
    |——|——|—— player            播放器組件
    |——|—— songList             歌單組件
    |——|—— songListDetails      歌單詳情組件
    |——|—— topList              排行榜組件
    |—— router                  路由組件
    |—— store                   數據狀態管理組件
    |—— util                    公用方法