什么是Vue腳手架

Vue腳手架，也就是vue cli。如果我們平時(shí)只是寫一些簡單的頁面的時(shí)候，只需要下載vue.js就行了。但是我們有的時(shí)候創(chuàng)建Vue項(xiàng)目的時(shí)候，有時(shí)候還有一些webpack的項(xiàng)目，很多配置特別麻煩。于是我們就可以用到Vue cli

vue-cli創(chuàng)建vue項(xiàng)目

一、安裝node環(huán)境

二、下載vue和vue-cli腳手架

命令：npm i -g vue ; npm i -g @vue/cli

三、在想要?jiǎng)?chuàng)建的位置路徑下打開cmd（直接點(diǎn)擊路徑輸入cmd即可打開當(dāng)前位置的終端）

四、創(chuàng)建vue項(xiàng)目，輸入命令（ vue create 項(xiàng)目名稱）

五、進(jìn)入詳細(xì)選擇

(上下 方向鍵選擇,空格鍵確定,enter進(jìn)入下一步)

1、默認(rèn)vue2版本和默認(rèn)vue3版本都是有Eslint和Babel的，Eslint是代碼規(guī)范的，Babel是將ES6轉(zhuǎn)化為ES5的。（這邊新手不建議安裝有Eslint的，所以選擇自主配置--最后一種）

 （按 space 鍵來進(jìn)行是否選擇，一般建議以上已勾選的選擇）

Babel：es6 轉(zhuǎn) es5

Router：路由

Vuex：數(shù)據(jù)容器，存儲(chǔ)共享數(shù)據(jù)

CSS Pre-processors：CSS 預(yù)處理器，后面會(huì)提示你選擇 less、sass、stylus 等

Linter / Formatter：代碼格式校驗(yàn)（一般情況下默認(rèn)勾選了，記得取消?。。。?/p>

2、選擇vue版本--目前選擇2版本

3、是否選擇history路由模式，（這里選擇“N”）

4、選擇css預(yù)處理器，一般選擇Less

5、Babel、ESLint 等工具會(huì)有一些額外的配置文件，這里的意思是問你將這些工具相關(guān)的配置文件寫到哪里：

In dedicated config files：分別保存到單獨(dú)的配置文件
In package.json：保存到 package.json 文件中
這里建議選擇第 1 個(gè)，保存到單獨(dú)的配置文件，這樣方便我們做自定義配置。

 6、是否將剛才的選擇保存起來，下次可以直接用，一般選擇N，可以根據(jù)自己需要選擇

7、開始創(chuàng)建，創(chuàng)建完成后可以打開文件

命令： cd 項(xiàng)目名稱  是選擇定位到項(xiàng)目

命令：npm run serve   則是運(yùn)行項(xiàng)目，運(yùn)行的項(xiàng)目就是剛剛cd項(xiàng)目的項(xiàng)目

8、運(yùn)行項(xiàng)目后，出現(xiàn)如下頁面就算是創(chuàng)建成功啦

總結(jié)

到此這篇關(guān)于vue-cli創(chuàng)建vue項(xiàng)目的文章就介紹到這了,更多相關(guān)vue-cli創(chuàng)建vue項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！