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

時間 2019-11-05

標籤 vue 音樂播放 2.0升简体版

原文原文鏈接

Vue.js音樂播放器2.0

以前初學Vue作了一個音樂播放器，受到很多人的喜歡。如今升級版來了！功能更強，技術棧更多：Vue2.0、Vuex、vue-router、axios、SASS(SCSS)、Express(上線版本是Koa2)、Webpack、ES六、localStorage(HTML5)CSS3...css

源代碼

源代碼地址：👉 GitHub
歡迎你們star和follow😄vue

預覽

在線預覽

在線預覽地址：👉 Vue音樂播放器
低版本瀏覽器可能有兼容性問題ios

預覽圖

更多預覽圖請看👉 更多

技術棧

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動畫及樣式。👍git

使用 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 的話說就是：github

Flux 架構就像眼鏡：您自會知道何時須要它。vue-router

各組件之間狀態共享也是難點。vuex
異步編程：JS是單線程，異步編程尤其重要。當咱們向後端請求數據，是異步的，若是沒有處理好相關的異步操做，是會有各類問題的。JS能夠利用setTimeout、回調、Generator、Promise、Async。
定時這種方式太麻煩，仍是不推薦；回調層次多了，有回調地獄，代碼維護性不好；Generator須要手動去執行，固然可使用相似co的模塊。相比之下Promise和Async是比較理想的。(詳看👉Promise對象、異步操做和Async函數)vue-cli
本項目中使用了QQ音樂和One(一個)的接口，後端API編寫也是難點，包含了各類異步請求。對返回數據的解析也是難點，有的時候你還須要對數據進行解碼。
各組件結構的設計：一開始大綱沒設計好，後面想修改涉及面會很廣。
過渡動畫讓交互更有趣，可是有的仍是耗性能的，有設備差別，沒用好會形成卡頓。