前言

最近老大說要重構項目----hybrid APP，而作為iOS開發(fā)的我雖然之前學過一點HTML基礎，一直沒有得到實戰(zhàn)，所以主動提出調研并學習Vue.js。就這樣，vue學習之路開始了。過了一遍官網(wǎng)之后就開始想實戰(zhàn)了，從網(wǎng)上查了資料正好看到黃軼大神的vue-music，于是就開始仿寫了。。。demo地址

概述

項目是基于Vue.js，成品是一個移動端的音樂播放器，來源于imooc的實戰(zhàn)課程

數(shù)據(jù)來源

所有數(shù)據(jù)都來自于QQ音樂，抓取自QQ的接口，大部分接口都是JSONP，抓取比較容易，其中一些接口限制了host，不能直接抓取，采用的方法是用axios代理，設置header，以此繞過host的限制

技術棧

從本項目能學到什么

可直接應用工作的13個基礎組件

1. confirm：確認對話框組件
2. listview：通訊錄列表組件
3. loading：加載態(tài)組件
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個業(yè)務組件

1. add-song：添加歌曲到列表組件
2. disc：歌單詳情頁組件
3. m-header：頁面頭部組件
4. music-list：歌曲列表頁面組件
5. player：播放器內核組件
6. playlist：播放列表組件
7. rank：排行榜頁面組件
8. recommend：推薦頁面組件
9. search：搜索頁面組件
10. singer：歌手頁面組件
11. singer-detail：歌手詳情頁組件
12. suggest：搜索提示列表組件
13. tab：頂部導航欄組件
14. top-list：排行榜詳情頁組件
15. user-center：用戶中心頁組件

寫在***

具體code可查看GitHub，通過vue-music項目學習了企業(yè)項目中項目目錄結構設計，組件封裝，移動端適配，路由拆分，性能調優(yōu)，同時對vuex有了更深刻的理解，node寫server也了解了一通，eslint代碼風格檢查工具讓書寫更規(guī)范，總之收獲很多，再次感謝開源精神。革命尚未成功，仍需努力。