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