Vue 已經用了不少時間，最近抽空把以前的未完成的酷狗音樂做完了，過來分享下，也可以直接點這里預覽，注意切換成手機模式。
技術棧： vue-router、eventBus、vuex、vue-awesome-swiper
整體功能 vs 酷狗官網：
總體模擬官網，原來的亮點保留，如：
除此之外，增加了
如果參考網易云，后續可以加的新功能還有一些，不過暫時我要先去做其他事了。
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 全家桶實現移動端酷狗音樂功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
