vue-cli是vue的腳手架喇勋，可以用來(lái)快速構(gòu)建一個(gè)項(xiàng)目缨该，其中全家桶包括router、vuex川背、axios等贰拿，以及各類(lèi)三方庫(kù)（element-ui、iview）熄云，三個(gè)插件聯(lián)用可以提升項(xiàng)目編寫(xiě)的速度
1.安裝
（1）首先安裝node膨更，使用node -v查看是否安裝成功
image.png
（2）全局安裝vue-cli，運(yùn)行npm install vue-cli -g缴允，使用vue --version查看版本
image.png
2.初始化項(xiàng)目
（1）cd進(jìn)入需要?jiǎng)?chuàng)建項(xiàng)目的文件夾荚守，運(yùn)行以下代碼
vue init webpack 項(xiàng)目名（不能中文）
image.png
看到以下提示說(shuō)明項(xiàng)目初始化完畢。根據(jù)提示cd進(jìn)入并npm run dev即可運(yùn)行項(xiàng)目（注意這里是運(yùn)行在開(kāi)發(fā)環(huán)境的练般，實(shí)際到生產(chǎn)環(huán)境還需打包矗漾，其中還有一系列問(wèn)題這里不做過(guò)多解釋?zhuān)?/p>
image.png
項(xiàng)目結(jié)構(gòu)及運(yùn)行
（1）這是項(xiàng)目結(jié)構(gòu)
image.png
（2）使用編輯器如phpstorm、webstorm薄料、vscode等等打開(kāi)項(xiàng)目敞贡，并在終端中運(yùn)行
(image.png)35A.png
image.png
非常牛皮，這樣就運(yùn)行出了第一個(gè)vue-cli項(xiàng)目摄职！
vue-router
vue-router的簡(jiǎn)單使用（這里需要把組件先import進(jìn)去才能在component中使用誊役，不然會(huì)報(bào)組件不存在的錯(cuò)誤）。整個(gè)頁(yè)面使用subject組件包起來(lái)谷市，在其中需要導(dǎo)航進(jìn)行跳轉(zhuǎn)頁(yè)面蛔垢，所以用了嵌套路由
image.png
其中使用路由傳參：
this.$router.push({name: 'ArticlePage'，params:{id:1})
接收路由傳的參數(shù)：
this.$route.params.id
axios
使用axios插件歌懒。
和jQuery的ajax方法差不多啦桌，用法如下:
axios.get(URL,params:{}).then(res)=>{成功代碼}.catch(()=>{失敗})
axios.post(URL,qs.stringfy(OBJ)).then((res)=>{成功代碼}).catch(()=>{失敗})
vuex
由于vue寫(xiě)出來(lái)的是單頁(yè)面應(yīng)用，數(shù)據(jù)等無(wú)法做到全局響應(yīng)，因此引入新插件vuex來(lái)管理全局狀態(tài)（個(gè)人理解為全局變量甫男，其實(shí)官方是叫全局狀態(tài)管理器）且改，它是一個(gè)對(duì)象，有四個(gè)重要屬性板驳，分別是getter又跛、state、mutation若治、actions慨蓝，這里直接看官方文檔的說(shuō)明比較好理解，點(diǎn)擊鏈接跳轉(zhuǎn)[https://vuex.vuejs.org/zh/]
這里我們將四個(gè)屬性分別寫(xiě)成了四個(gè)js文件端幼，如圖所示：(原因：本次項(xiàng)目功能較少礼烈，因此沒(méi)有必要將它模塊化，關(guān)于模塊化的內(nèi)容自行百度)
（1）state是數(shù)據(jù)池婆跑，也就是需要的數(shù)據(jù)的集合此熬，它是一個(gè)對(duì)象
（2）getter與python對(duì)象中的getter方法類(lèi)似，在頁(yè)面中取得時(shí)候需要引入vuex自帶的模塊mapGetters滑进，引入以及在頁(yè)面中的使用方法如下
import { mapGetters } from 'vuex'
在vuex的computed屬性中計(jì)算該數(shù)據(jù)犀忱，這樣就能做到數(shù)據(jù)同步：
computed: {
...mapGetters(['touris']) // es6的語(yǔ)法，問(wèn)了就是不知道
},
（3）actions：mutation里的方法的驅(qū)動(dòng)：
頁(yè)面內(nèi)使用方法：this.$store.dispatch(方法名扶关，參數(shù));
對(duì)應(yīng)的action里就應(yīng)該定義一個(gè)相同的方法名阴汇，寫(xiě)法如下：
export function 方法名({commit}, 形參) {
return commit(mutation里對(duì)應(yīng)的方法名, 實(shí)參)
}
（4）mutations是改變store狀態(tài)的唯一方法（官方是這樣說(shuō)的）.我們可以在這個(gè)方法內(nèi)請(qǐng)求接口等等
export const 方法名= (state, data) => {
// 修改狀態(tài)等等操作
};
最后在store.js中引用并導(dǎo)出stores對(duì)象
最后是項(xiàng)目打包，在終端運(yùn)行npm run build即可使用webpack打包节槐，訪(fǎng)問(wèn)index.html即可運(yùn)行程序搀庶，最后部署到服務(wù)器即可，當(dāng)然還需要考慮打包前的配置（包括接口代理疯淫、圖片路徑等等相關(guān)問(wèn)題）
ps:個(gè)人認(rèn)為vue-cli不適合制作太過(guò)炫酷的頁(yè)面地来。使用vue-cli寫(xiě)項(xiàng)目需要一定的頁(yè)面布局經(jīng)驗(yàn)和js基礎(chǔ)，因此小編建議要慎用熙掺。
77777777777777777777777777777777777777777
