vue-cli建立vue專案的詳細步驟記錄

2022-06-07 14:02:11

什麼是Vue腳手架

Vue腳手架，也就是vue cli。如果我們平時只是寫一些簡單的頁面的時候，只需要下載vue.js就行了。但是我們有的時候建立Vue專案的時候，有時候還有一些webpack的專案，很多設定特別麻煩。於是我們就可以用到Vue cli

一、安裝node環境

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

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

三、在想要建立的位置路徑下開啟cmd（直接點選路徑輸入cmd即可開啟當前位置的終端）

四、建立vue專案，輸入命令（ vue create 專案名稱）

五、進入詳細選擇

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

1、預設vue2版本和預設vue3版本都是有Eslint和Babel的，Eslint是程式碼規範的，Babel是將ES6轉化為ES5的。（這邊新手不建議安裝有Eslint的，所以選擇自主設定--最後一種）

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

Babel：es6 轉 es5

Router：路由

Vuex：資料容器，儲存共用資料

CSS Pre-processors：CSS 前處理器，後面會提示你選擇 less、sass、stylus 等

Linter / Formatter：程式碼格式校驗（一般情況下預設勾選了，記得取消！！！）

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

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

4、選擇css前處理器，一般選擇Less

5、Babel、ESLint 等工具會有一些額外的組態檔，這裡的意思是問你將這些工具相關的組態檔寫到哪裡：

In dedicated config files：分別儲存到單獨的組態檔
In package.json：儲存到 package.json 檔案中
這裡建議選擇第 1 個，儲存到單獨的組態檔，這樣方便我們做自定義設定。

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

7、開始建立，建立完成後可以開啟檔案

命令： cd 專案名稱是選擇定位到專案

命令：npm run serve 則是執行專案，執行的專案就是剛剛cd專案的專案

8、執行專案後，出現如下頁面就算是建立成功啦

到此這篇關於vue-cli建立vue專案的文章就介紹到這了,更多相關vue-cli建立vue專案內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！