一、安裝腳手架
安裝命令如下
npm install -g @vue/cli
yarn global add @vue/cli
檢測版本
vue --version
二、創建項目
1.創建項目開始,定義名稱
vue create [appName]
例如創建一個名稱為 testapp 的項目命令為
vue create testapp
2 選擇配置類型
按方向鍵選擇,按enter確認
第一個為默認配置,包含eslint 和 babel
第二個為自定義配置
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 測試
上述選完后點擊enter 可看到所有選中的設置項
4 針對上述選中項進行單獨配置
(1) 開啟vue router
選擇路由模式 是否啟用history模式(默認是hash模式)
(2)開啟 css pre-process
選擇css 預處理方式 箭頭選擇 enter確認
依次為 dart-sass dart編寫的sass
node-sass node編寫的sass
less
stylus
(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 提交時進行檢驗及修改
(5)選擇單元測試方案
Mocha + Chai
Jest
(6)選擇e2e測試方案
Cypress (Chrome only) 只能在chorme中使用
Nightwatch (WebDriver-based)
5 保存配置位置
In dedicated config files 額外文件中
package.json package.json中
6 是否將當前配置保存為一個默認配置
轉載https://www.it610.com/article/1290886238940766208.htm