Vue 全家桶實現一個移動端酷狗音樂

Vue 已經用了不少時間，最近抽空把以前的未完成的酷狗音樂做完了，過來分享下，也可以直接點這裏預覽，注意切換成手機模式。

技術棧： vue-router、eventBus、vuex、vue-awesome-swiper

整體功能 vs 酷狗官網：

總體模擬官網，原來的亮點保留，如：

1. 圖片懶加載

除此之外，增加了

1. 加了全局的 Loading 組件，根據不同頁面調整 Loading 尺寸
2. 搜索頁面做了優化，可以在刷新時保留之前的搜索結果
3. 播放頁面單獨做了一個路由，可以在刷新時保留當前歌曲頁面
4. 播放器的常駐以及滾動時最小化，避免遮擋歌曲名稱
5. 部分可以重用，極少更新的數據，譬如主頁四大欄，避免了數據的二次請求。
6. 增加了主頁四欄手勢滑動切換
7. 歌詞滾動等
8. ...

如果參考網易雲，後續可以加的新功能還有一些，不過暫時我要先去做其他事了。

CSS 覺得不難，都是手寫的，採用的是 BEM 規範，js 是 ESLint。

總體難度適中，只不過，如果規範化，組件化抽象，任務還是不少的，具體的坑我就不說了，源代碼都在這裏，推薦想要熟悉 vue 的同學也自己試下。

作爲一個練手項目，vue 全家桶都覆蓋到了，當然，如果你只用 vue 和 vue-router 去實現，也不是不行，實現到一大半，就會明白爲什麼要全家桶了。

至於酷狗的接口以及跨域的問題，解決方案都在 README 裏，都是借用的其他作者的分享與整理，在此還是要感謝下 ecitlm 和 JsonBird。

src/ 文件目錄：

|__ App.vue
  |__ assets
    |__ css
      |__ base.less
      |__ constant.less
      |__ iconfont.css
      |__ reset.css
    |__ images
      |__ logo__grey.png
      |__ logo__text.png
      |__ logo__theme.png
    |__ js
      |__ api.js
      |__ bus.js
      |__ globalEvent.js
      |__ mobileLayout.js
      |__ utils.js
  |__ components
    |__ Main.vue
    |__ new_song
      |__ NewSong.vue
      |__ Slider.vue
    |__ player
      |__ NextButton.vue
      |__ PlayButton.vue
      |__ PlayerLyrics.vue
      |__ PlayerMax.vue
      |__ PlayerMed.vue
      |__ PlayerProgress.vue
      |__ PrevButton.vue
    |__ public
      |__ AppHeader.vue
      |__ AppLoading.vue
      |__ AppMusicList.vue
      |__ AppNav.vue
      |__ PubList.vue
      |__ PubModuleDes.vue
      |__ PubModuleHead.vue
      |__ PubModuleTitle.vue
    |__ rank
      |__ RankInfo.vue
      |__ RankList.vue
    |__ search
      |__ Search.vue
    |__ singer
      |__ SingerCategory.vue
      |__ SingerInfo.vue
      |__ SingerList.vue
    |__ song
      |__ SongList.vue
      |__ SongListInfo.vue
  |__ main.js
  |__ mixins
    |__ index.js
    |__ loading.js
  |__ router
    |__ index.js
  |__ store
    |__ device.js
    |__ images.js
    |__ index.js
    |__ loading.js
    |__ newSong.js
    |__ player.js
    |__ rank.js
    |__ search.js
    |__ singer.js
    |__ song.js