前端框架Vue（11）——vue-cli 仿網易雲音樂 Demo,環境搭建到開發 Vue 全家桶練手項目

1、前言

  在這個 vue 系列的第一篇文章，我寫過是 vue-cli-simple 腳手架的環境搭建。前段時間，也恰好給公司作了一個後臺管理系統的產品，用的就是 vue-cli-simple。 一個月的時間將系統從無到上線，組件化、模塊化開發的很是快速、可讀性、複用性，整理架構清晰，易管理、維護。

  因此，此次利用 vue-cli 完整版來實踐一下。那麼這個 simple 在哪呢？其實，simple 是 webpack-simple。這個腳手架的 webpack 有更全的功能。

  並且，目錄結構有了比較大變化。可自行去 github 克隆倉庫到本地比較。我在開發完成後，將 Demo 打包放到了 xshell 上部署，發現只要在config 文件夾中的 index.js 稍稍改動就不會出現空白頁 404 的狀況。

---

2、仿網易雲音樂

vue-cli-demo github地址傳送門

這是一張 Demo 的截圖，大體模塊四個，header、carousel、pages、footer。主要功能，組件（頁面間的切換），登陸（待作），輪播圖組件，公共數據、狀態管理。完成這個項目能夠體驗到：

一、vue-cli 的環境搭建，項目目錄。
二、學習組件化、模塊化開發。
三、學習 vue 全家桶：vue-router 路由、vuex 狀態管理。
四、瞭解 webpack 的壓縮、打包。

---

3、技術棧

vue.js + vue-router + vuex + ElementUI

4、vue-cli 環境搭建

vue（腳手架） 推薦開發環境，一文中詳細的介紹了 simple 的環境搭建，而 vue-cli,只須要改爲 vue init webpack <項目名字>，便可。

---

5、目錄結構

|——build                             //構建              

|——config                            //配置

|——node_modules                      //npm項目依賴

|——src    
    |——assets                        //靜態資源，圖片
|    
    |——components——                  //公共組件 
|              |——carousel.vue        //輪播圖組件
    |
|              |——footerComponent.vue //底部組件
    |        
|              |——headerComponent.vue //頭部組件
    |
|              |——navComponent.vue    //紅色部分
    |
|
    |——config——
|              |——env.js             //開發api路徑
    |
|              |——fetch.js           //封裝的異步請求
    |——data
|
    |——router——                     //路由
|              |——index.js
    |——service                      //項目中所有的異步接口請求文件
|    
    |——store——                      //vuex狀態管理
|             |——action.js
    |                        
|             |——index.js
    |
|             |——mutations.js
    |——view——                      //組件頁面部分
|            |——findMusicPage——
    |                 |——musicTypeController
|            |
    |                 |——findMusicComponent.vue
|            |——downloadComponent.vue
    |                
|            |——friendComponent.vue    
    |                
|            |——musicManComponent.vue
    |
|            |——myMusicComponent.vue
    |——app.vue                      //主文件
|            
    |——main.js                      //主文件入口
|——static
    
|——test                             //單元測試

|——index.html                        //首頁

|——package.json

|——README.md

---

6、vue-cli-easy

這是我本身根據 vue-cli 環境，添加了 vue-router, vuex, api接口公共抽象配置，elementUI 的腳手架。你能夠直接 clone 到你的 workspace 中，進行依賴的安裝（npm install）,便可以進行本身的項目開發了。

項目地址傳送門：github vue-cli-easy 連接

---

github 上的 README.md 持續的會完善 ... ...