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 去實現，也不是不行，實現到一大半，就會遇到和我第一次作時同樣的困境：

1. 組件嵌套三四層，數據傳遞太麻煩，一改就要改不少地方。
2. 兄弟組件通訊，把數據一層層 emit 到 App.vue，也很繁瑣。若是用 eventBus 也是同樣的繁瑣。
3. 若是有個全局數據須要全部組件來共享，那一層層傳遞寫下來簡直是噩夢。

每一個子組件，若是要獲取 music.hash 至少都要：

<PlayButton :hash="music.hash" /> <!--還有子組件的 props 配置... -->
<StopButton :hash="music.hash" /> <!--還有子組件的 props 配置... -->
<NextButton :hash="music.hash" /> <!--還有子組件的 props 配置... -->

vuex 的引入，讓全部的子組件經過 this.$store.state.music.hash 就能夠訪問 music.hash ，更簡單的 this.musicHash 也是能夠的，而且默認值都寫在一個地方，全局共享。

接口

酷狗的接口在 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

源代碼在這裏