一，vue-cli環境搭建

1，全局安裝webpack

npm install webpack -g

2，安裝vue腳手架

npm install vue-cli -g

3，新建一個新的project，終端定位到該項目下

4，初始化項目

vue init webpack-simple

? ? 會讓你進行該項目的一些基本設置，如下圖

5，安裝項目依賴

npm install

6，啟動項目

npm run dev

? ? ?可以看到終端提示成功

在瀏覽器上打開localhost:8080/#/可以看到如下圖所示，說明腳手架搭建完成。

目錄如下

 1 |——build                             //構建              
 2 
 3 |——config                            //配置
 4 
 5 |——node_modules                      //npm項目依賴
 6 
 7 |——src  
 8     |——assets                        //靜態資源，圖片
 9 |   
10     |——components——                  //公共組件 
11 |             
12     |——router——                     //路由
13 |             |——index.js
14     |——app.vue                      //主文件
15 |           
16     |——main.js                      //主文件入口
17 |——static
18 
19 |——test                             //單元測試
20 
21 |——index.html                       //首頁
22 
23 |——package.json
24 
25 |——README.md    

二，技術棧

1，vue-router進行路由跳轉

　　（1），首先要寫在實例上注冊路由，在main.js上如圖

　　（2），在組件app上定義（頁面實現）

　　定義了兩個標簽<router-link> 和<router-view>來對應點擊和顯示部分。<router-link> 就是定義頁面中點擊的部分，<router-view> 定義顯示部分，就是點擊后，區配的內容顯示在什么地方。<router-link> 還有一個非常重要的屬性 to，定義點擊之后，要到哪里去， 如：<router-link ?to="/home">Home</router-link>

　　（3），在router->index.js中配置路由（注意：記得先引進再配置），其中redirect是鏈接直接指向的方向（重定向）

　　（3），執行過程

　　當用戶點擊 router-link 標簽時，會去尋找它的 to 屬性， 它的 to 屬性和 js 中配置的路徑{ path: '/home', component: Home}? path 一一對應，從而找到了匹配的組件， 最后把組件渲染到 <router-view> 標簽所在的地方。所有的這些實現是基于hash 實現的。

?2，Vuex管理數據狀態

　　vuex是一個專門為vue.js設計的集中式狀態管理架構。具體使用可以看我另一邊文章《vuex的使用》

?

轉載于:https://www.cnblogs.com/wxw1314/p/8686257.html

總結

以上是生活随笔為你收集整理的用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。