vue cli 4 +創建項目步驟


一、安裝腳手架

安裝命令如下

npm install -g @vue/cli
yarn global add @vue/cli

檢測版本

vue --version

vue cli 4 +創建項目步驟_第1張圖片

二、創建項目

1.創建項目開始,定義名稱
vue create [appName]

例如創建一個名稱為 testapp 的項目命令為

vue create testapp

vue cli 4 +創建項目步驟_第2張圖片

2 選擇配置類型

按方向鍵選擇,按enter確認
第一個為默認配置,包含eslint 和 babel
第二個為自定義配置
vue cli 4 +創建項目步驟_第3張圖片

3 各項配置設置
操作方式

按方向鍵進行上下選擇
按空格 選中
按A鍵全選
按I鍵全選
按enter 確認所有配置進入下一步

(1)babel

是否引入轉碼功能,該項功能可將es6轉碼成es5

(2) TypeScript

是否引入ts,引入后可使用ts進行編程

(3)Progressive Web App (PWA) Support

是否引入漸進式Web應用程序(PWA)支持 (pwa為應用多項技術的web app。核心技術包括 App Mainfest、Service Worker、Web Push,等等)

(4)Router

是否引入vue-router

(5)vuex

是否引入狀態管理

(6)css-processors

是否引入css預處理

(7) linter / formatter

是否引入格式驗證

(8) Unit Testing

是否引入單元測試

(9)e2e Testing

是否引入 end to end 測試
vue cli 4 +創建項目步驟_第4張圖片
上述選完后點擊enter 可看到所有選中的設置項
vue cli 4 +創建項目步驟_第5張圖片

4 針對上述選中項進行單獨配置
(1) 開啟vue router

選擇路由模式 是否啟用history模式(默認是hash模式)
vue cli 4 +創建項目步驟_第6張圖片

(2)開啟 css pre-process

選擇css 預處理方式 箭頭選擇 enter確認
依次為 dart-sass dart編寫的sass
node-sass node編寫的sass
less
stylus vue cli 4 +創建項目步驟_第7張圖片

(3) 開啟linter/formatter

ESLint with error prevention only 只有報錯功能
ESLint + Airbnb config 簡化模式
ESLint + Standard config 標准模式
ESLint + Prettier 嚴格模式

(4)選擇校驗時機

lint on save 保存即檢驗
lint and fix on commit 提交時進行檢驗及修改
vue cli 4 +創建項目步驟_第8張圖片

(5)選擇單元測試方案

Mocha + Chai
Jest

(6)選擇e2e測試方案

Cypress (Chrome only) 只能在chorme中使用
Nightwatch (WebDriver-based)

5 保存配置位置

In dedicated config files 額外文件中
package.json package.json中
vue cli 4 +創建項目步驟_第9張圖片

6 是否將當前配置保存為一個默認配置

vue cli 4 +創建項目步驟_第10張圖片

 

轉載https://www.it610.com/article/1290886238940766208.htm


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM