一、安裝 @vue/cli
vue-cli更新到 3.x 之後，vue-cli 的包名從 vue-cli 改成了 @vue/cli
如果之前安裝過舊版本的 vue-cli(1.x 或 2.x)，首先需要卸載掉
npm uninstall -g vue-cli
# or
yarn global remove vue-cli
然後重新安裝新版本的@vue/cli
npm install -g @vue/cli
# or
yarn global add @vue/cli
安裝完成之後，可以使用 vue -V(大寫的V)查看版本號
$ vue -V
3.8.2
二、創建項目的方法
1.vue create
運行以下命令來創建一個新項目：
vue create <my-project>
你會被提示選取一個 preset。你可以選默認的包含了基本的 Babel + ESLint 設置的 preset，也可以選“手動選擇特性”來選取需要的特性。
如果你決定手動選擇特性，在操作提示的最後你可以選擇將已選項保存爲一個將來可複用的 preset。我們會在下一個章節討論 preset 和插件。
~/.vuerc
被保存的 preset 將會存在用戶的 home 目錄下一個名爲 .vuerc 的 JSON 文件裏。如果你想要修改被保存的 preset / 選項，可以編輯這個文件。
在項目創建的過程中，你也會被提示選擇喜歡的包管理器或使用淘寶 npm 鏡像源以更快地安裝依賴。這些選擇也將會存入 ~/.vuerc。
vue create 命令有一些可選項，你可以通過運行以下命令進行探索：
用法：create [options] <app-name>
創建一個由 `vue-cli-service` 提供支持的新項目
選項：
-p, --preset <presetName> 忽略提示符並使用已保存的或遠程的預設選項
-d, --default 忽略提示符並使用默認預設選項
-i, --inlinePreset <json> 忽略提示符並使用內聯的 JSON 字符串預設選項
-m, --packageManager <command> 在安裝依賴時使用指定的 npm 客戶端
-r, --registry <url> 在安裝依賴時使用指定的 npm registry
-g, --git [message] 強制 / 跳過 git 初始化，並可選的指定初始化提交信息
-n, --no-git 跳過 git 初始化
-f, --force 覆寫目標目錄可能存在的配置
-c, --clone 使用 git clone 獲取遠程預設選項
-x, --proxy 使用指定的代理創建項目
-b, --bare 創建項目時省略默認組件中的新手指導信息
-h, --help 輸出使用幫助信息
2.使用圖形化界面
也支持圖形化的方式來構建項目
在指定目錄打開終端，然後運行
vue ui
上述命令會打開一個瀏覽器窗口，並以圖形化界面將你引導至項目創建的流程。
3.拉取 2.x 模板 (舊版本)
3.x 版本也支持 init 的構建方式
Vue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具：
npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `[email protected]` 相同
vue init webpack my-project
4.以 vue create創建一個項目
1.執行：
vue create my-project
2.此處有兩個選擇：
- default (babel, eslint)默認套餐，提供babel和eslint支持
- Manually select features自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持 TypeScript ，就應該選擇這一項。
- 可以使用上下方向鍵來切換選項。如果只需要 babel 和 eslint 支持，那麼選擇第一項，就完事了，靜靜等待 vue 初始化項目。
- vue-cli 內置支持了8個功能特性，可以多選：使用方向鍵在特性選項之間切換，使用空格鍵選中當前特性，使用 a 鍵切換選擇所有，使用 i 鍵翻轉選項。
對於每一項的功能，此處做個簡單描述：
- TypeScript 支持使用 TypeScript 書寫源碼
- Progressive Web App (PWA) Support PWA 支持。
- Router 支持 vue-router 。
- Vuex 支持 vuex 。
- CSS Pre-processors 支持 CSS 預處理器。
- Linter / Formatter 支持代碼風格檢查和格式化。
- Unit Testing 支持單元測試。
- E2E Testing 支持 E2E 測試。
- 我選擇了 Router，Vuex，CSS Pre-processors，Linter / Formatter
3.按住enter進入下一步，接下來都是對之前每項選項的更詳細的選擇。
- css選擇SCSS/SASS
- Linter / Formatter選擇prettier
- 這一步就是要選擇配置文件的位置了。對於 Babel 、 PostCSS 等，都可以有自己的配置文件： .babelrc 、 .postcssrc 等等，同時也可以把配置信息放在 package.json 裏面。此處出於對編輯器（ Visual Studio Code ）的友好支持（編輯器一般默認會在項目根目錄下尋找配置文件），選擇把配置文件放在外面，選擇 In dedicated config files
4.Save this as a preset for future projects?這個就是問要不要把當前的這一系列選項配置保存起來，方便下一次創建項目時複用。選擇y。
5.選完之後， vue-cli 就根據前面選擇的內容，開始初始化項目了。
三、啓動項目
初始完之後，進入到項目根目錄：
cd my-project
啓動項目：
npm run serve
稍等一會兒，可以看到自動在瀏覽器中打開了
四、安裝插件
待續。。。