CL0940-全網稀缺Vue 2.0高級實戰 獨立開發專屬音樂WebAPP
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