Vue.js音樂播放器2.0升級版
之前初學(xué)Vue做了一個(gè)音樂播放器，受到不少人的喜歡?，F(xiàn)在升級版來了！功能更強(qiáng)，技術(shù)棧更多。
源代碼
源代碼地址：?? GitHub
歡迎大家star和follow??
預(yù)覽
在線預(yù)覽
在線預(yù)覽地址：?? Vue音樂播放器
預(yù)覽圖
Vue音樂播放器升級版 - microzz.com
更多預(yù)覽圖請看?? 更多
技術(shù)棧
Vue2：采用最新Vue2的語法??
Vuex：實(shí)現(xiàn)不同組件之間的狀態(tài)共享??
vue-router：單頁應(yīng)用路由管理必備??
axios：發(fā)起http請求??
SASS(SCSS)：css預(yù)處理語言??
Express(上線版本是Koa2)：因?yàn)関ue-cli是用的Express做服務(wù)器，所以開源的開發(fā)版本是Express，自己生產(chǎn)環(huán)境用的是Koa2。 ??
Webpack：自動(dòng)化構(gòu)建工具，大部分配置vue-cli腳手架已經(jīng)弄好了，很方便。??
ES6：采用ES6語法，這是趨勢。??
localStorage(HTML5)：本地存儲(chǔ)，保存用戶個(gè)性化設(shè)置。??
CSS3：CSS3動(dòng)畫及樣式。??
使用 Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
遇到的問題
- vuex什么時(shí)候使用，如何使用，就要看項(xiàng)目需要。引用 Redux 的作者 Dan Abramov 的話說就是：
Flux 架構(gòu)就像眼鏡：您自會(huì)知道什么時(shí)候需要它。
各組件之間狀態(tài)共享也是難點(diǎn)。
- 異步編程：JS是單線程，異步編程尤為重要。當(dāng)我們向后端請求數(shù)據(jù)，是異步的，如果沒有處理好相關(guān)的異步操作，是會(huì)有各種問題的。JS可以利用
setTimeout、回調(diào)、Generator、Promise、Async。
定時(shí)這種方式太麻煩，還是不推薦；回調(diào)層次多了，有回調(diào)地獄，代碼維護(hù)性很差；Generator需要手動(dòng)去執(zhí)行，當(dāng)然可以使用類似co的模塊。相比之下Promise和Async是比較理想的。(詳看??Promise對象、異步操作和Async函數(shù)) - 本項(xiàng)目中使用了QQ音樂和One(一個(gè))的接口，后端API編寫也是難點(diǎn)，包含了各種異步請求。對返回?cái)?shù)據(jù)的解析也是難點(diǎn)，有的時(shí)候你還需要對數(shù)據(jù)進(jìn)行解碼。
- 各組件結(jié)構(gòu)的設(shè)計(jì)：一開始大綱沒設(shè)計(jì)好，后面想修改涉及面會(huì)很廣。
- 過渡動(dòng)畫讓交互更有趣，但是有的還是耗性能的，有設(shè)備差異，沒用好會(huì)造成卡頓。
【聲明】：本項(xiàng)目僅供學(xué)習(xí)交流，請不要用做任何商業(yè)用途??有任何疑問請聯(lián)系作者??zhaohui@microzz.com
About
源代碼地址：?? GitHub
個(gè)人網(wǎng)站：??microzz.com
GitHub：??microzz
