①
Vue CLI的包名稱由 vue-cli 改成了 @vue/cli。
如果已經全局安裝了舊版本的 vue-cli(1.x或2.x)，
你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli卸載
②
安裝新的vue-cli包
npm
install
-g @vue/cli
或
yarn
global
add
@vue/cli
③
安裝之后，可以在命令行中訪問 vue 命令。可以通過簡單運行 vue，看看是否展示出了一份所有可用命令的幫助信息，來驗證它是否安裝成功。
還可以用 vue -V 這個命令來檢查其版本是否正確
④
在創建的項目目錄執行
vue create
my-project
⑤
選擇如下內容
? Check the features needed for your project: >(*) Choose Vue version //選擇vue的腳手架版本 (*) Bable //轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。 ( ) TypeScript // JavaScript的一個超集（添加了可選的靜態類型和基於類的面向對象編程：類型批注和編譯時類型檢查、類、接口、模塊、lambda 函數） ( ) Progressive Web App (PWA) Support // 漸進式Web應用程序 (*) Router // vue-router（vue路由） (*) Vuex // vuex（vue的狀態管理模式） (*) CSS Pre-processors // CSS 預處理器（如：less、sass） (*) Linter / Formatter // 代碼風格檢查和格式化（如：ESlint） ( ) Unit Testing // 單元測試（unit tests） ( ) E2E Testing // e2e（end to end） 測試
⑥
⑦
⑧
css預處理器：SCSS/SASS
// Sass安裝需要Ruby環境，是在服務端處理的，SCSS 是 Sass3新語法（完全兼容 CSS3且繼承Sass功能）//node-sass是用node(調用cpp編寫的libsass)來編譯sass//dart-sass是用dart VM 來編譯sass//如果用sass dart-sass性能更好（也是sass官方使用的），而且node-sass因為國情問題經常裝不上LESS//Less最終會通過編譯處理輸出css到瀏覽器，Less 既可以在客戶端上運行，也可在服務端運行 (借助Node.js)Stylus//Stylus主要用來給Node項目進行CSS預處理支持，Stylus功能上更為強壯，和js聯系更加緊密，可創建健壯的、動態的的CSS。
注意：更新node版本之后vue項目運行報錯，如下圖
分析：這個錯又是node又是node-sass還有對應版本的，不難猜出是node和node-sass版本沖突了，
原因：node-sass是一個庫，是用 node(調用 cpp 編寫的 libsass)來編譯 sass，node-sass是在node環境里的，
他把Node.js綁定到LibSass上，（流行樣式表預處理器Sass的C版本），所以會版本沖突
解決辦法：當然就是更新node-sass了：
npm install node-sass --unsafe-perm=true --allow-root
⑨
Eslint 檢驗代碼格式工具
? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only // 只進行報錯提醒 ESLint + Airbnb config // 不嚴謹模式 ESLint + Standard config // 正常模式 ESLint + Prettier // 嚴格模式
⑩
⑪
需要的Babel,ESlint,etc.配置存放的位置
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) In dedicated config files // 存放在專用配置文件中 > In package.json // 存放在package.json中
⑫
是否保存當前選擇的配置項，如果當前配置是經常用到的配置，建議選擇y存儲一下當前配置項。如果只是臨時使用的話就不需要存儲了，根據自己情況而定啦。
選擇n之后則會直接開始創建項目了，選擇y之后則會輸入一個存儲當前配置項的名稱:
? Save preset as: 配置項名稱
下次再創建項目的時候就會看到，自己所存儲的這個名字啦。
👏👏
--
分 割 線 --
vue-cli插件安裝，使用
$ vue add
命令去執行下載插件包，並且調用插件包去修改 Webpack 配置並執行一些 command 命令。
add 行為可以拆開為兩部 —— 安裝和調用，以
@vue/cli-plugin-eslint
為例：
npm install @vue/cli-plugin-eslint --save-dev
vue invoke @vue/eslint
注意安裝插件是有簡寫的，到安裝的時候會補全插件名稱。簡寫方式如下：
# 簡寫
vue add @vue/eslint
# 全名
vue add @vue/cli-plugin-eslint
# 簡寫
vue add apollo
# 全名
vue add vue-cli-plugin-apollo
而 router 和 vuex 插件比較特殊，它沒有相應的插件，所以使用 add 的形式有所不同。
vue add router
vue add vuex
以上兩個命令會為項目安裝 vue-router 和 vuex，並且改變項目目錄結構以便更快的進行路由和狀態管理的開發操作。
👉
Vuex使用