CL0940-全網稀缺Vue 2.0進階實戰 獨立開發專屬音樂WebAPP

標籤：第三方   idt   規範   圖片   data   方法   分享圖片   使用者互動   web   

CL0940-全網稀缺Vue 2.0進階實戰 獨立開發專屬音樂WebAPP

學習要趁早，點滴記錄，學習就是進步！

隨筆背景：在很多時候，很多入門不久的朋友都會問我：我是從其他語言轉到程式開發的，有沒有一些基礎性的資料給我們學習學習呢，你的架構感覺一下太大了，希望有個循序漸進的教程或者視頻來學習就好了。對於學習有困難不知道如何提升自己可以加扣：1225462853進行交流得到協助，擷取學習資料.

CL0940-全網稀缺Vue 2.0進階實戰 獨立開發專屬音樂WebAPP

：http://pan.baidu.com/s/1jI05TPW

基於Vue 全家桶 (2.x)製作的移動端音樂 WebApp ，一個媲美原生的移動端音樂 App，項目完整、功能完備、UI美觀、互動一流。

  

學會能直接用在工作中的組件

13個

基礎組件

1.confirm：確認對話方塊組件

2.listview：通訊錄列表組件

3.loading：載入態組件

4.no-result：無結果展示組件

5.progress-bar：進度條組件

6.progress-circle：圓形進度條組件

7.scroll：移動端滾動組件

8.search-box：搜尋方塊組件

9.search-list：搜尋列表組件

10.slider：輪播圖組件

11.switches：開關切換組件

12.top-tip：頂部訊息提示組件

13. song-list：歌曲列表組件

15個

業務組件

1.add-song：添加歌曲到列表組件

2.disc：歌單詳情頁組件

3.m-header：頁面頭部組件

4.music-list：歌曲列表頁面組件

5.player：播放器核心組件

6.playlist：播放清單組件

7.rank：熱門排行榜頁面組件

9.search：搜尋網頁面組件

8.recommend：推薦頁面組件

10.singer：歌手頁面組件

11.singer-detail：歌手詳情頁組件

12.suggest：搜尋提示列表組件

13.tab：頂部導覽列組件

14.top-list：熱門排行榜詳情頁組件

15.user-center：使用者中心頁組件

技術棧

【前端】

Vue：用於構建使用者介面的 MVVM 架構。它的核心是響應的資料繫結和組系統件

vue-router：為單頁面應用提供的路由系統，項目上線前使用了Lazy Loading Routes技術來實現非同步載入最佳化效能

vuex：Vue 集中狀態管理，在多個組件共用某些狀態時非常便捷

vue-lazyload：第三方圖片懶載入庫，最佳化頁面載入速度

better-scroll：iscroll 的最佳化版，使移動端滑動體驗更加流暢

Sass(Scss)：css 先行編譯處理器

ES6：ECMAScript 新一代文法，模組化、解構賦值、Promise、Class 等方法非常好用

【後端】

Node.js：利用 Express 起一個本地測試伺服器

jsonp：服務端通訊。抓取 QQ音樂(移動端)資料

axios：服務端通訊。結合 Node.js 代理後端請求，抓取 QQ音樂(PC端)資料

【自動化構建及其他工具】

vue-cli：Vue 腳手架工具，快速初始化項目代碼

eslint：代碼風格檢查工具，規範代碼書寫

vConsole：移動端調試工具，在移動端輸出日誌

收穫

總結了一套 Vue 萬用群組件，可以在其它項目中複用的 10+ 個基礎組件、15+ 個業務組件

總結了一套常用的 SCSS mixin 庫

總結了一套常用的 JS 工具函數庫

體會到組件化、模組化開發帶來的便捷

體會到將對象封裝成類(ES6 class) 的便捷性，以及利用工廠方式初始化類執行個體

學會利用js編寫過渡效果及動畫效果製作良好的使用者互動體驗

TODO

歌曲資料全部來自 QQ 音樂，介面改變了可能就要修改jsonp和axios代碼

由於項目的應用級狀態不多（10個左右），所以就沒有將action、mutation、和getters分割到單獨的檔案。但這樣架構並不便於維護

實現細節

主要頁面：播放器核心頁、推薦頁、歌單詳情頁、歌手頁、歌手詳情頁、排行頁、搜尋網頁、添加歌曲頁、個人中心頁等。

核心頁面：播放器核心頁

組件樹

CL0940-全網稀缺Vue 2.0進階實戰 獨立開發專屬音樂WebAPP