什么是Vue腳手架

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

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

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

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

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

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

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

五、進入詳細選擇

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

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

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

Babel：es6 轉(zhuǎn) es5

Router：路由

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

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

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

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

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

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

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

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

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

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

命令： cd 項目名稱  是選擇定位到項目

命令：npm run serve   則是運行項目，運行的項目就是剛剛cd項目的項目

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

總結(jié)

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

最新評論