一，vue-cli環(huán)境搭建

1，全局安裝webpack

npm install webpack -g

2，安裝vue腳手架

npm install vue-cli -g

3，新建一個(gè)新的project，終端定位到該項(xiàng)目下

4，初始化項(xiàng)目

vue init webpack-simple

? ? 會(huì)讓你進(jìn)行該項(xiàng)目的一些基本設(shè)置，如下圖

5，安裝項(xiàng)目依賴(lài)

npm install

6，啟動(dòng)項(xiàng)目

npm run dev

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

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

目錄如下

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

二，技術(shù)棧

1，vue-router進(jìn)行路由跳轉(zhuǎn)

　　（1），首先要寫(xiě)在實(shí)例上注冊(cè)路由，在main.js上如圖

　　（2），在組件app上定義（頁(yè)面實(shí)現(xiàn)）

　　定義了兩個(gè)標(biāo)簽<router-link> 和<router-view>來(lái)對(duì)應(yīng)點(diǎn)擊和顯示部分。<router-link> 就是定義頁(yè)面中點(diǎn)擊的部分，<router-view> 定義顯示部分，就是點(diǎn)擊后，區(qū)配的內(nèi)容顯示在什么地方。<router-link> 還有一個(gè)非常重要的屬性 to，定義點(diǎn)擊之后，要到哪里去， 如：<router-link ?to="/home">Home</router-link>

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

　　（3），執(zhí)行過(guò)程

　　當(dāng)用戶(hù)點(diǎn)擊 router-link 標(biāo)簽時(shí)，會(huì)去尋找它的 to 屬性， 它的 to 屬性和 js 中配置的路徑{ path: '/home', component: Home}? path 一一對(duì)應(yīng)，從而找到了匹配的組件， 最后把組件渲染到 <router-view> 標(biāo)簽所在的地方。所有的這些實(shí)現(xiàn)是基于hash 實(shí)現(xiàn)的。

?2，Vuex管理數(shù)據(jù)狀態(tài)

　　vuex是一個(gè)專(zhuān)門(mén)為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。具體使用可以看我另一邊文章《vuex的使用》

?

轉(zhuǎn)載于:https://www.cnblogs.com/wxw1314/p/8686257.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。