vue新出了 vue cli 3，並直接改名為 @vue/cli，今天就來盤他。
首先介紹等啰里啰嗦的就不寫了，貼個link吧。
要是想先了解下 Vue Cli 3 的新特性 和 與 2 的區別，可以先看下我這篇：
Vue Cli 3 新特性 與 2 的區別
安裝
一、找個地方新建文件夾
二、用cmd進入文件夾（這里最好用cmd，不要用 git bash，不然之后的選擇很麻煩）
三、全局 Install Vue Cli 3
npm install -g @vue/cli
// OR
yarn global add @vue/cli
四、check 版本
vue --version
五、創建一個項目(多圖預警)
vue create hello-world
先說一下，我的vue是3.8.4版本的。
-
首先會彈出 是否需要 taobao 鏡像，我選n
-
然后會彈出如下界面：
此處有兩個選擇： -
default (babel, eslint) 默認套餐，提供 babel 和 eslint 支持。
-
Manually select features 自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持 TypeScript ，就應該選擇這一項。
可以使用上下方向鍵來切換選項。如果只需要 babel 和 eslint 支持，那么選擇第一項，就完事了，靜靜等待 vue 初始化項目。
- 如果想要更多的支持，就選擇第二項：切換到第二項，按下 enter 鍵選中，彈出如下界面：
vue-cli 內置支持了8個功能特性，可以多選：使用方向鍵在特性選項之間切換，使用空格鍵選中當前特性，使用 a 鍵切換選擇所有，使用 i 鍵翻轉選項。
對於每一項的功能，此處做個簡單描述：
- Babel 支持使用babel做轉義。
- TypeScript 支持使用 TypeScript 書寫源碼。
- Progressive Web App (PWA) Support PWA 支持。
- Router 支持 vue-router 。
- Vuex 支持 vuex 。
- CSS Pre-processors 支持 CSS 預處理器。
- Linter / Formatter 支持代碼風格檢查和格式化。
- Unit Testing 支持單元測試。
- E2E Testing 支持 E2E 測試。
那么基於開發常見的項目，同時兼顧項目健壯性的原則，本次選擇如下特性支持：
- 首先 Babel 必選，轉換ES6語法。
- TypeScript 和 PWA 我這里用不到所以不選。
- Router 必選沒道理。
- Vuex 可以后用到再加，也可以直接選
- CSS Pre-processors 基本上必選吧（LESS/SASS/Stylus）
- Linter / Formatter 良好的風格規范是必須的，基本必選。
- Unit Testing 和 E2E Testing 我這里用不到所以不選。
- 選好按下 enter 鍵確認選擇，進入下一步：
接下來就是詳細選擇了：
1. 是否使用history模式的router，這里選n，采用hash模式
2.選擇一種css預處理語言，這里我選擇LESS(忘截圖了)
3. 選擇linter配置 我選第三個ESLint + Standard config
- ESLint with error prevention only——只檢測錯誤。
- ESLint + Airbnb config——獨角獸公司的Airbnb，有人評價說“這是一份最合理的JavaScript編碼規范”，它幾乎涵蓋了JavaScript的各個方面。
- ESLint + Standard config——standardJs一份強大的JavaScript編碼規范，自帶linter和自動代碼糾正。沒有配置。自動格式化代碼。可以在編碼早期發現規范問題和低級錯誤。
- ESLint Prettier—— Prettier 作為代碼格式化工具，能夠統一整個團隊的代碼風格。
4. 選擇校驗的時機，我選擇第一項
- 保存的時候校驗
- 提交的時候校驗
5. 接下來這里是詢問怎么存放babel, postcss, eslint等的配置文件，我選擇第一項，單獨存放
- 單獨存放
- 集成在package.json
6. 詢問是否保存當前配置，我選擇n
7. 選擇一個包管理器來安裝，這個看自己喜好吧，我選擇yarn
如果選擇了 單元測試 還會有選擇單元測試的配置，一般Mocha + Chai
六、配置好了，開始安裝
這里他會直接把 node_modules 直接安裝好。
七、安裝完畢，進入項目，運行命令啟動服務
cd hello-world
npm run serve
// OR
yarn serve
八、同時使用Vue Cli2
Vue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具：
npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project