前言

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

概述

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

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

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

技術(shù)棧

從本項目能學(xué)到什么

可直接應(yīng)用工作的13個基礎(chǔ)組件

1. confirm：確認對話框組件
2. listview：通訊錄列表組件
3. loading：加載態(tài)組件
4. no-result：無結(jié)果展示組件
5. progress-bar：進度條組件
6. progress-circle：圓形進度條組件
7. scroll：移動端滾動組件
8. search-box：搜索框組件
9. search-list：搜索列表組件
10. slider：輪播圖組件
11. switches：開關(guān)切換組件
12. top-tip：頂部消息提示組件
13. song-list：歌曲列表組件

15個業(yè)務(wù)組件

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

寫在***

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