Vue 全家桶實(shí)現(xiàn)移動(dòng)端酷狗音樂功能
Vue 已經(jīng)用了不少時(shí)間，最近抽空把以前的未完成的酷狗音樂做完了，過來(lái)分享下，也可以直接點(diǎn)這里預(yù)覽，注意切換成手機(jī)模式。
技術(shù)棧： vue-router、eventBus、vuex、vue-awesome-swiper
整體功能 vs 酷狗官網(wǎng)：
總體模擬官網(wǎng)，原來(lái)的亮點(diǎn)保留，如：
- 圖片懶加載
除此之外，增加了
- 加了全局的 Loading 組件，根據(jù)不同頁(yè)面調(diào)整 Loading 尺寸
- 搜索頁(yè)面做了優(yōu)化，可以在刷新時(shí)保留之前的搜索結(jié)果
- 播放頁(yè)面單獨(dú)做了一個(gè)路由，可以在刷新時(shí)保留當(dāng)前歌曲頁(yè)面
- 播放器的常駐以及滾動(dòng)時(shí)最小化，避免遮擋歌曲名稱
- 部分可以重用，極少更新的數(shù)據(jù)，譬如主頁(yè)四大欄，避免了數(shù)據(jù)的二次請(qǐng)求。
- 增加了主頁(yè)四欄手勢(shì)滑動(dòng)切換
- 歌詞滾動(dòng)等
- ...
如果參考網(wǎng)易云，后續(xù)可以加的新功能還有一些，不過暫時(shí)我要先去做其他事了。
CSS 覺得不難，都是手寫的，采用的是 BEM 規(guī)范，js 是 ESLint。
總體難度適中，只不過，如果規(guī)范化，組件化抽象，任務(wù)還是不少的，具體的坑我就不說了，源代碼都在這里，推薦想要熟悉 vue 的同學(xué)也自己試下。
作為一個(gè)練手項(xiàng)目，vue 全家桶都覆蓋到了，當(dāng)然，如果你只用 vue 和 vue-router 去實(shí)現(xiàn)，也不是不行，實(shí)現(xiàn)到一大半，就會(huì)明白為什么要全家桶了。
至于酷狗的接口以及跨域的問題，解決方案都在 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
總結(jié)
以上所述是小編給大家介紹的Vue 全家桶實(shí)現(xiàn)移動(dòng)端酷狗音樂功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue中this.$router.go(-1)失效(路由改變了，界面未刷新)
本文主要介紹了vue中this.$router.go(-1)失效(路由改變了,界面未刷新),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
本篇文章給大家分享了vue2單元測(cè)試環(huán)境搭建的詳細(xì)步驟，對(duì)此有需要的朋友參考學(xué)習(xí)下。2018-05-05
vue?elementui?實(shí)現(xiàn)搜索欄子組件封裝的示例代碼
這篇文章主要介紹了vue?elementui?搜索欄子組件封裝,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue組件props屬性監(jiān)聽不到值變化問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue計(jì)算屬性computed、事件、監(jiān)聽器watch的使用講解
今天小編就為大家分享一篇關(guān)于vue計(jì)算屬性computed、事件、監(jiān)聽器watch的使用講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
解決Vue.js父組件$on無(wú)法監(jiān)聽子組件$emit觸發(fā)事件的問題
今天小編就為大家分享一篇解決Vue.js父組件$on無(wú)法監(jiān)聽子組件$emit觸發(fā)事件的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09
vue el-form-item如何添加icon和tooltip
這篇文章主要介紹了vue el-form-item如何添加icon和tooltip問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue-element-admin如何轉(zhuǎn)換成中文
這篇文章主要介紹了vue-element-admin如何轉(zhuǎn)換成中文問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue使用exceljs導(dǎo)出excel文件的詳細(xì)教程
這篇文章主要為大家詳細(xì)介紹了Vue如何使用exceljs導(dǎo)出excel文件的詳細(xì)教程,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
這篇文章主要介紹了Vue 內(nèi)置組件keep-alive的使用示例，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04