Vue CLI 是一個基于 Vue.js 的標(biāo)準(zhǔn)化工具，可以幫助開發(fā)者快速創(chuàng)建和管理 Vue 項(xiàng)目。Vue CLI 提供了一個圖形化界面和一個命令行界面，讓開發(fā)者可以方便地進(jìn)行項(xiàng)目的初始化、開發(fā)、構(gòu)建和部署。
本文將介紹如何使用 Vue CLI 的命令行界面來搭建一個簡單的 Vue 項(xiàng)目，并介紹一些常用的命令和選項(xiàng)。
安裝 Vue CLI
要使用 Vue CLI，首先需要安裝 Node.js，版本要求是 8.9 或以上（推薦 10 以上）。然后可以使用 npm 或 yarn 來全局安裝 Vue CLI：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安裝完成后，可以在命令行中輸入 vue 來查看所有可用的命令和幫助信息。也可以輸入 vue --version 來查看 Vue CLI 的版本。
創(chuàng)建項(xiàng)目
要創(chuàng)建一個新的 Vue 項(xiàng)目，可以使用 vue create 命令，并指定項(xiàng)目的名稱：
vue create my-project
這個命令會在當(dāng)前目錄下創(chuàng)建一個名為 my-project 的文件夾，并在其中初始化一個基本的 Vue 項(xiàng)目。在創(chuàng)建過程中，會讓開發(fā)者選擇一個預(yù)設(shè)的配置，或者自定義配置。預(yù)設(shè)的配置包括：
- default：默認(rèn)配置，包含了 Babel 和 ESLint。
- default (Vue 3 Preview)：默認(rèn)配置，但是使用了 Vue 3 的預(yù)覽版。
- Manually select features：手動選擇特性，可以自己選擇需要的插件和配置。
如果選擇了手動選擇特性，那么會出現(xiàn)一系列的選項(xiàng)，讓開發(fā)者根據(jù)自己的需求來勾選。例如：
- Choose Vue version：選擇 Vue 的版本，可以是 2.x 或者 3.x。
- Babel：是否使用 Babel 來轉(zhuǎn)譯代碼。
- TypeScript：是否使用 TypeScript 來編寫代碼。
- Progressive Web App (PWA) Support：是否支持 PWA。
- Router：是否使用 Vue Router 來管理路由。
- Vuex：是否使用 Vuex 來管理狀態(tài)。
- CSS Pre-processors：是否使用 CSS 預(yù)處理器，例如 Sass、Less 或 Stylus。
- Linter / Formatter：是否使用 ESLint 或 Prettier 來規(guī)范和格式化代碼。
- Unit Testing：是否使用單元測試框架，例如 Jest 或 Mocha。
- E2E Testing：是否使用端到端測試框架，例如 Cypress 或 Nightwatch。
在選擇完特性后，還會有一些額外的選項(xiàng)，例如：
- Use class-style component syntax：是否使用類風(fēng)格的組件語法。
- Use Babel alongside TypeScript：是否在 TypeScript 中使用 Babel。
- Use history mode for router：是否在路由中使用 history 模式。
- Pick a CSS pre-processor：選擇一個 CSS 預(yù)處理器。
- Pick a linter / formatter config：選擇一個代碼規(guī)范和格式化配置。
- Pick additional lint features：選擇額外的代碼檢查特性。
- Pick a unit testing solution：選擇一個單元測試解決方案。
- Pick an E2E testing solution：選擇一個端到端測試解決方案。
最后，還會讓開發(fā)者選擇是否將當(dāng)前的配置保存為一個新的預(yù)設(shè)，以便下次使用。
創(chuàng)建項(xiàng)目完成后，可以進(jìn)入項(xiàng)目目錄，并使用 npm run serve 或 yarn serve 命令來啟動一個開發(fā)服務(wù)器，然后在瀏覽器中訪問 http://localhost:8080 來查看項(xiàng)目的效果。
其他命令
除了 vue create 命令，Vue CLI 還提供了一些其他的命令，例如：
vue add：添加一個插件到已有的項(xiàng)目中。vue invoke：調(diào)用一個插件的生成器。vue inspect：檢查一個項(xiàng)目的 webpack 配置。vue serve：在開發(fā)環(huán)境下快速預(yù)覽一個文件。vue build：在生產(chǎn)環(huán)境下構(gòu)建一個文件。vue ui：啟動一個圖形化界面來管理項(xiàng)目。vue upgrade：升級項(xiàng)目中的 Vue CLI 相關(guān)模塊。
更多的命令和選項(xiàng)可以參考 Vue CLI 的官方文檔：https://cli.vuejs.org/zh/
總結(jié)
Vue CLI 是一個非常強(qiáng)大和靈活的工具，可以幫助開發(fā)者快速搭建和管理 Vue 項(xiàng)目。它提供了豐富的特性和插件，讓開發(fā)者可以根據(jù)自己的需求來定制項(xiàng)目的配置。它也提供了一個圖形化界面，讓開發(fā)者可以更直觀地操作和監(jiān)控項(xiàng)目。Vue CLI 是 Vue.js 開發(fā)的標(biāo)準(zhǔn)化工具，值得每個 Vue.js 開發(fā)者學(xué)習(xí)和使用。
