如何使用 Vue CLI 快速搭建 Vue 項目

Vue CLI 是一個基于 Vue.js 的標(biāo)準(zhǔn)化工具，可以幫助開發(fā)者快速創(chuàng)建和管理 Vue 項目。Vue CLI 提供了一個圖形化界面和一個命令行界面，讓開發(fā)者可以方便地進(jìn)行項目的初始化、開發(fā)、構(gòu)建和部署。

本文將介紹如何使用 Vue CLI 的命令行界面來搭建一個簡單的 Vue 項目，并介紹一些常用的命令和選項。

安裝 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)建項目

要創(chuàng)建一個新的 Vue 項目，可以使用 vue create 命令，并指定項目的名稱：

vue create my-project

這個命令會在當(dāng)前目錄下創(chuàng)建一個名為 my-project 的文件夾，并在其中初始化一個基本的 Vue 項目。在創(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)一系列的選項，讓開發(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。

在選擇完特性后，還會有一些額外的選項，例如：

• 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)建項目完成后，可以進(jìn)入項目目錄，并使用 npm run serve 或 yarn serve 命令來啟動一個開發(fā)服務(wù)器，然后在瀏覽器中訪問 http://localhost:8080 來查看項目的效果。

其他命令

除了 vue create 命令，Vue CLI 還提供了一些其他的命令，例如：

• vue add：添加一個插件到已有的項目中。
• vue invoke：調(diào)用一個插件的生成器。
• vue inspect：檢查一個項目的 webpack 配置。
• vue serve：在開發(fā)環(huán)境下快速預(yù)覽一個文件。
• vue build：在生產(chǎn)環(huán)境下構(gòu)建一個文件。
• vue ui：啟動一個圖形化界面來管理項目。
• vue upgrade：升級項目中的 Vue CLI 相關(guān)模塊。

更多的命令和選項可以參考 Vue CLI 的官方文檔：https://cli.vuejs.org/zh/

總結(jié)

Vue CLI 是一個非常強(qiáng)大和靈活的工具，可以幫助開發(fā)者快速搭建和管理 Vue 項目。它提供了豐富的特性和插件，讓開發(fā)者可以根據(jù)自己的需求來定制項目的配置。它也提供了一個圖形化界面，讓開發(fā)者可以更直觀地操作和監(jiān)控項目。Vue CLI 是 Vue.js 開發(fā)的標(biāo)準(zhǔn)化工具，值得每個 Vue.js 開發(fā)者學(xué)習(xí)和使用。