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