vuecli腳手架的優(yōu)勢(shì)有一套成熟的vue項(xiàng)目架構(gòu)設(shè)計(jì)，能夠快速初始化一個(gè)Vue項(xiàng)目vuecli是官方支持的一個(gè)腳手架，會(huì)隨本版本進(jìn)行迭代更新vuecli提供了一套本地的node測(cè)試服務(wù)器，使用vuecli自己提供的命令，就可以啟動(dòng)；這次給大家?guī)?lái)vuecli腳手架初始化如何使用，使用vuecli腳手架的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下vuecli是Vue 提供的一個(gè)官方命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用該工具提供開(kāi)箱即用的構(gòu)建工具配置；vue cli腳手架安裝失敗，導(dǎo)致無(wú)法啟用 vue項(xiàng)目?jī)x表盤 解決的辦法把原本的命令換為cnpm i g @vuecli 安裝成功 然后使用 vue V命令查看一下版本 使用 vue h 查看輸出的使用信息 #160 #160#160#160；需要先安裝nodejs網(wǎng)頁(yè)鏈接如果安裝后仍然不能運(yùn)行，就是自動(dòng)配置環(huán)境變量失敗了，需要手動(dòng)配置環(huán)境變量網(wǎng)頁(yè)鏈接。

一起跟隨小編過(guò)來(lái)看看吧相信很多小伙伴在用Vuecli安裝的腳手架開(kāi)發(fā)的時(shí)候，在開(kāi)發(fā)環(huán)境中項(xiàng)目可以很正常的運(yùn)行，但是進(jìn)入到生產(chǎn)環(huán)境，編譯打包后，放入服務(wù)器，項(xiàng)目就不正常了，會(huì)出現(xiàn)空白頁(yè)或者路由跳轉(zhuǎn)404等問(wèn)題遇到這些問(wèn)題；順序執(zhí)行了兩個(gè)指令之后，使用 cnpm 安裝 vue腳手架，提示 cnpm 無(wú)法識(shí)別，就算使用 npm 安裝 vuecli 成功之后，輸入 vue 指令也會(huì)提示無(wú)法識(shí)別黑人問(wèn)號(hào)問(wèn)號(hào)問(wèn)號(hào)問(wèn)號(hào)于是觀察一下安裝過(guò)程，在進(jìn)行全局安裝 vue腳手；按官網(wǎng)說(shuō)的，我們開(kāi)發(fā)環(huán)境也需要使用開(kāi)發(fā)版本的vuejs，否則很多警告就會(huì)不生效，比如props的校驗(yàn)器等 檢查publichtml的vuejs引用如果是按腳手架的則無(wú)需關(guān)注確認(rèn)以上問(wèn)題以后，我們重新安裝依賴并且重新跑腳手架編譯；在安裝 @vuecli 腳手架的時(shí)候，通過(guò)npm安裝總是無(wú)法成功，改用淘寶鏡像安裝也是一樣的自己改用yarn安裝，確實(shí)能夠安裝，但是安裝完成后無(wú)法執(zhí)行vue命令，執(zhí)行時(shí)提示如下錯(cuò)誤但是通過(guò) yarn global list 命令查看時(shí)，確；而vuecli是vue的官方腳手架，它能幫助我們方便的配置webpack這樣看來(lái)，有很大的可能我們需要同時(shí)使用vuecli與vuex如何在vuecli中使用vuex項(xiàng)目搭建及添加vuex 當(dāng)我們使用vuecli搭建一個(gè)vue項(xiàng)目的時(shí)候假設(shè)項(xiàng)目名為learn；直接回車就可以，然后再執(zhí)行webpack v，如果出現(xiàn)相應(yīng)的版本號(hào)就是安裝成功 3最后就是安裝vuecli腳手架了 vuecli腳手架安裝命令安裝之后 執(zhí)行 vue V#160，如果出現(xiàn)相應(yīng)的版本號(hào)就是安裝成功 4用vuecli創(chuàng)建一。

安裝成功之后，我們執(zhí)行以下命令就可以創(chuàng)建一個(gè)完整的項(xiàng)目案例vue create myproject執(zhí)行上述命令以后，會(huì)讓我們選擇是按照默認(rèn)default的配置，還是選擇執(zhí)行配置，如果你已經(jīng)非常熟悉了腳手架工具或者默認(rèn)的配置你滿足不了你；由于windows系統(tǒng)的某方面問(wèn)題，vue腳手架安裝可能會(huì)出現(xiàn)第一證書(shū)丟失 報(bào)錯(cuò)vuecli · Failed to download repo vuejstemplateswebpacksimple unable to verify the first certificate簡(jiǎn)單一點(diǎn)，你也可以直接去；3安裝vue腳手架 npm install vuecli g 測(cè)試在硬盤上找一個(gè)文件夾放工程用的，在終端中進(jìn)入該目錄 cd 目錄路徑 根據(jù)模板創(chuàng)建項(xiàng)目 vue init webpacksimple 工程名字lt工程名字不能用中文或者創(chuàng)建 vue10 的項(xiàng)目vue；剛開(kāi)始打開(kāi)會(huì)看到有報(bào)錯(cuò)，其實(shí)不是語(yǔ)法錯(cuò)誤，是因?yàn)榫幾g器默認(rèn)編譯es5的語(yǔ)法，而vue腳手架用的是es6的語(yǔ)法，我用的編譯器是webStorm，只要設(shè)置一下就行了。

vuecli腳手架安裝命令安裝之后 執(zhí)行 vue V#160，如果出現(xiàn)相應(yīng)的版本號(hào)就是安裝成功 4用vuecli創(chuàng)建一個(gè)基于webpack的新項(xiàng)目并運(yùn)行 首先可以在桌面新建一個(gè)文件夾，如Vue 然后執(zhí)行cd Vue 進(jìn)入文件夾，然后輸入；安裝 3x 版本的 Vue 腳手架輸入 vue V 如果出現(xiàn)版本號(hào)，就說(shuō)明安裝成功腳手架安裝成功之后，就可以通過(guò)腳手架創(chuàng)建vue項(xiàng)目了通過(guò)上面腳手架創(chuàng)建的Vue項(xiàng)目，使用 npm run serve 命令之后，打印如下使用；既然可以vue init說(shuō)明vue命令環(huán)境中存在阿，如果不能執(zhí)行說(shuō)明你全局就沒(méi)安裝vue，安裝腳手架和安裝vue可不是一個(gè)概念，腳手架的vue版本直接在packagejson里就能看了；下面整個(gè)過(guò)程是基于已經(jīng)安裝nodejs和cnpm的基礎(chǔ)上，nodejs如何安裝就不在這里詳說(shuō)了如何全局化安裝cnpm，這里簡(jiǎn)單提一下淘寶鏡像命令其實(shí)對(duì)于安裝vuecli，使用npm命令和cnpm命令都是可以的，個(gè)人覺(jué)得使用npm安裝的比較。