VUE-CLI3.0腳手架安裝

文檔：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 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。