首先，你需要具備以下知識，不然閱讀起來可能會有一些阻礙。

1，vue-cli 腳手架 基礎

2，javascript 基礎

3，html css 基礎 (其中涉及到 html5,css3)

ok,話不多說，先看一下效果圖

這時候我想可以插入一個預覽地址了：點擊預覽

github地址：github地址

小提示：思維導圖被我在打掃衛生的時候弄丟了

沒關係，我徒手用鍵盤擼文字導圖。其實，這裡的思維導圖就是一個邏輯，告訴我們應該從哪裡下手，代碼架構，與組件開發。需要說明的是我這裡用的是酷狗api，用後台做了代理，後面會詳細介紹怎麼用後台代理實現跨域。

話不多說，擼思維導圖

一、go、go、go。vue 有一個特點就是漸進式框架，我們要利用這個特性(組件)將網易雲音樂分成四大板塊(組件)，頂部導航欄 、側邊欄、歌曲信息欄、歌曲控制欄

二、頂部導航欄可以分成以下幾個功能區，Logo、搜索框、用戶區、窗口控制區

三、側邊導航欄可以分成以下幾個功能區，推薦、我的音樂、歌單

四、歌曲信息欄為動態生成，所以就擼一個組件放在那裡，到時候將動態信息壓入進去配合html、css顯示出來

五、歌曲控制欄有固定的布局，功能都是圍繞歌曲，也就是audio(html5)標籤，用一個組件實現與信息欄的交互。我這裡是最後實現這個功能的(大概因為我是一個美術生)

可能文字導圖看起來很難受，我現在用 XMind8 做一個思維導圖，沒有那麼詳細請諒解。

前期準備工作已經差不多，現在用 vue-cli 腳手架生成vue的helloword（不會使用請百度關鍵詞 "vue-cli" 教程）

成功項目截圖

沒有安裝vue-cli框架的同學可以使用npm來安裝，win+r 打開cmd窗口 。

輸入 ：npm install -g vue-cli

創建項目框架 : vue init webpack HelloWord （HelloWord 為項目名稱）

安裝項目依賴：npm install （前提是進入項目根目錄下使用 cmd）

測試項目是否成功：npm run dev （前提是進入項目根目錄下使用 cmd，成功會顯示vue Logo）

說了一大堆廢話，下一篇文章將帶我們一起進入代碼代碼世界！！！

推薦閱讀：