Vue全家桶構建網易雲音樂web app

前言

使用vue cli3構建的SPA移動端網頁,有搜索、播放、和歌單功能。

總體UI就是網易雲音樂官網的，部分組件用到了vux。播放功能就一個組件沒寫單獨頁面，用的是原生的H5。

爬取網易雲音樂的 api地址。

在線預覽

• 點擊這裏預覽，PC端推薦在chrome調試模式下預覽，手機端直接點擊連接。
• 網頁效果截圖：

---

源碼解析

src目錄解析：

│  App.vue
│  main.js
│  router.js
│
├─api //api配置文件夾
│      common.js
│      config.js
│
├─assets //靜態圖片資源
│      find.svg
│      hot_bg.jpg
│      hot_icon.png
│      play.png
│
├─components
│  ├─HomeBottom //主頁底部組件
│  │      foot.svg
│  │      footbg.png
│  │      index.vue
│  │
│  ├─HomeTop //主頁頭部組件
│  │      index.vue
│  │      logo.svg
│  │
│  ├─HotWord //熱門搜索詞
│  │      index.vue
│  │
│  ├─MusicPlayer //播放器組件
│  │      index.vue
│  │
│  ├─RecommendList //推薦歌單
│  │      index.vue
│  │
│  ├─SongItem //歌曲組件
│  │      index.vue
│  │
│  ├─TabIndex //tab的首頁
│  │      index.vue
│  │
│  ├─TabRank //tab的排行榜頁
│  │      index.vue
│  │
│  └─TabSearch //tab的搜索頁
│          index.vue
│
├─store //vuex
│      actions.js
│      getters.js
│      index.js
│      mutation-types.js
│      mutations.js
│      state.js
│
├─styles
│      playlist_page.css
│      remd_list.css
│      song_item.css
│
└─views
        HomePage.vue  //主界面
        PlayListPage.vue //歌單頁

• 技術棧：vuex vue-router vux(UI庫) axios

新手學vue，代碼確定有不少糟糕的地方.若是不嫌棄能夠給個Star
github項目地址， 前端小江