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

源代码在这里