1. 概述
Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，提供：
-
通過
@vue/cli實現的交互式的項目腳手架。 -
通過
@vue/cli+@vue/cli-service-global實現的零配置原型開發。 -
一個運行時依賴 ( @vue/cli-service )，該依賴：
- 可升級；
- 基於 webpack 構建，並帶有合理的默認配置；
- 可以通過項目內的配置文件進行配置；
- 可以通過插件進行擴展。
-
一個豐富的官方插件集合，集成了前端生態中最好的工具。
-
一套完全圖形化的創建和管理 Vue.js 項目的用戶界面。
Vue CL確保了各種構建工具能夠基於智能的默認配置即可平穩銜接，不必糾結配置的問題。與此同時，它也為每個工具提供了調整配置的靈活性，無需 eject。
1.1. 組件
Vue CLI 有幾個獨立的部分——多個單獨發布的包
1.1.1. CLI
CLI (@vue/cli) 是一個全局安裝的 npm 包，提供了終端里的 vue 命令。它可以通過 vue create 快速搭建一個新項目，或者直接通過 vue serve 構建新想法的原型。你也可以通過 vue ui 通過一套圖形化界面管理你的所有項目
1.1.2. CLI 服務
CLI 服務 (@vue/cli-service) 是一個開發環境依賴。它是一個 npm 包，局部安裝在每個 @vue/cli 創建的項目中。
CLI 服務是構建於 webpack 和 webpack-dev-server 之上的。它包含了：
- 加載其它 CLI 插件的核心服務；
- 一個針對絕大部分應用優化過的內部的 webpack 配置；
- 項目內部的
vue-cli-service命令，提供serve、build和inspect命令。
1.1.3. CLI 插件
CLI 插件是向你的 Vue 項目提供可選功能的 npm 包，例如 Babel/TypeScript 轉譯、ESLint 集成、單元測試和 end-to-end 測試等。Vue CLI 插件的名字以 @vue/cli-plugin- (內建插件) 或 vue-cli-plugin- (社區插件) 開頭，非常容易使用。
當在項目內部運行 vue-cli-service 命令時，它會自動解析並加載 package.json 中列出的所有 CLI 插件。
2. 安裝
2.1. 環境准備
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推薦 v10 以上)
[root@DESKTOP-MSD7I5A ~]# node -v
v16.2.0
2.2. 安裝Vue CLI
可以使用下列任一命令全局安裝這個包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
筆者使用局部安裝：
[root@DESKTOP-MSD7I5A node]# mkdir vue
[root@DESKTOP-MSD7I5A node]# cd vue
[root@DESKTOP-MSD7I5A vue]# npm install @vue/cli
- 提示：全局安裝使用起來會比較方便
檢查版本：
[root@DESKTOP-MSD7I5A vue]# npx vue -V
@vue/cli 5.0.3
- 注意：npx 是調用項目內部安裝的模塊，運行的時候會到
node_modules/.bin路徑和環境變量$PATH里面，檢查命令是否存在（詳細可見npx 使用教程 - 阮一峰的網絡日志 (ruanyifeng.com)）
3. 創建
3.1. 命令行創建
運行以下命令來創建一個新項目：
[root@DESKTOP-MSD7I5A vue]# npx vue create hello-world
在創建的時候會預設一些可選項，主要是鏡像選擇、預設配置（preset）、包管理器（package manager）：
[root@DESKTOP-MSD7I5A vue]# npx vue create hello-world
? Your connection to the default yarn registry seems to be slow.
Use https://registry.npmmirror.com for faster installation? Yes
Vue CLI v5.0.3
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: NPM
Vue CLI v5.0.3
✨ Creating project in /root/vscode/node/vue/hello-world.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
added 858 packages in 43s
🚀 Invoking generators...
📦 Installing additional dependencies...
added 97 packages in 18s
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project hello-world.
👉 Get started with the following commands:
$ cd hello-world
$ npm run serve
3.2. 圖形化界面創建
可以通過 vue ui 命令以圖形化界面創建和管理項目：
[root@DESKTOP-MSD7I5A vue]# npx vue ui
🚀 Starting GUI...
🌠 Ready on http://localhost:8000
此時會自動打開瀏覽器界面：
接下里就是圖形化的操作界面：
操作的可選項和CLI基本一致，誠然可視化界面確實更清爽明了
創建完成后：
4. 測試運行
4.1. 通過CLI運行
[root@DESKTOP-MSD7I5A vue]# cd hello-world
[root@DESKTOP-MSD7I5A hello-world]# npm run serve
> hello-world@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 10900ms 4:17:55 PM
App running at:
- Local: http://localhost:8080/
- Network: unavailable
瀏覽器查看：
4.2. 通過GUI運行
通過可視化圖形界面運行Vue項目：
