Vue音樂播放器2.0升級版來了

microzz發表於2017-04-08
Vue播放器

Vue.js音樂播放器2.0

之前初學Vue做了一個音樂播放器，受到不少人的喜歡。現在升級版來了！功能更強，技術棧更多：Vue2.0、Vuex、vue-router、axios、SASS(SCSS)、Express(上線版本是Koa2)、Webpack、ES6、localStorage(HTML5)CSS3...

原始碼

原始碼地址：? GitHub
歡迎大家star和follow?

預覽

線上預覽

線上預覽地址：? Vue音樂播放器
低版本瀏覽器可能有相容性問題

預覽圖

Vue音樂播放器2.0升級版來了
Vue音樂播放器升級版 microzz

更多預覽圖請看? 更多

技術棧

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複製程式碼

遇到的問題

  1. vuex什麼時候使用，如何使用，就要看專案需要。引用 Redux 的作者 Dan Abramov 的話說就是：

    Flux 架構就像眼鏡：您自會知道什麼時候需要它。

    各元件之間狀態共享也是難點。

  2. 非同步程式設計：JS是單執行緒，非同步程式設計尤為重要。當我們向後端請求資料，是非同步的，如果沒有處理好相關的非同步操作，是會有各種問題的。JS可以利用setTimeout、回撥、Generator、Promise、Async。
    定時這種方式太麻煩，還是不推薦；回撥層次多了，有回撥地獄，程式碼維護性很差；Generator需要手動去執行，當然可以使用類似co的模組。相比之下Promise和Async是比較理想的。(詳看?Promise物件、非同步操作和Async函式)

  3. 本專案中使用了QQ音樂和One(一個)的介面，後端API編寫也是難點，包含了各種非同步請求。對返回資料的解析也是難點，有的時候你還需要對資料進行解碼。
  4. 各元件結構的設計：一開始大綱沒設計好，後面想修改涉及面會很廣。
  5. 過渡動畫讓互動更有趣，但是有的還是耗效能的，有裝置差異，沒用好會造成卡頓。

【宣告】：本專案僅供學習交流，請不要用做任何商業用途?有任何疑問請聯絡作者?zhaohui@microzz.com

About

原始碼地址：? GitHub
個人網站：?microzz-IT技術分享
GitHub：?microzz

相關文章