vue-cli3快速創建項目

文檔：https://cli.vuejs.org/zh/guide/
條件：
npm 更至最新
node >=8.9

1.全局安裝 npm install -g @vue/cli 或 yarn global add @vue/cli

2.查看版本/是否安裝成功 vue -V

image.png

3.在新文件夾下創建項目 vue create my-project

image.png

指向的vuecli3是因為上一次記錄過的cli3配置，第一次執行create是沒有的
按鍵盤上下鍵可以選擇默認（default）還是手動（Manually），如果選擇default，一路回車執行下去就行了
繼續手動一下

image.png

4.選擇配置，看個人項目需求
注意，空格鍵是選中與取消，A鍵是全選
TypeScript 支持使用 TypeScript 書寫源碼
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 預處理器。
Linter / Formatter 支持代碼風格檢查和格式化。
Unit Testing 支持單元測試。
E2E Testing 支持 E2E 測試。

image.png

5.css的預處理，我選擇的是stylus

image.png

6.我選擇的是ESLint + Prettier

image.png

7.選擇語法檢查方式，我自己選擇保存就檢測
第一個是保存檢測，第二個是fix和commit的時候檢測

image.png

8.單元測試，我選擇了Mocha

image.png

9.配置文件存放地方
第一個是獨立文件夾位置，第二個是在package.json文件里

image.png

10.詢問是否記錄這一次的配置，以便下次使用，如一開始的時候會顯示的vuecli3配置

image.png

11.回車確定等待下載

image.png

12.裝好后，啟動
cd my-project // 進入到項目根目錄
npm run serve // 啟動項目

image.png

image.png

13.3.0的目錄比2.0簡潔了很多，沒了build和config等目錄。若需要其他配置則需要自己手動配置了呢

image.png

基本就醬紫啦~

如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具
npm install -g @vue/cli-init
vue init webpack my-project

作者：LLLLIANGS
鏈接：https://www.jianshu.com/p/5e13bc2eb97c
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。