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

总结

以上所述是小编给大家介绍的Vue 全家桶实现移动端酷狗音乐功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！