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

源代码在这里