App下載

如何使用 Vue CLI 快速搭建 Vue 項(xiàng)目

夢(mèng)里花 2023-06-23 09:30:00 瀏覽數(shù) (1449)
反饋

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

本文將介紹如何使用 Vue CLI 的命令行界面來(lái)搭建一個(gè)簡(jiǎn)單的 Vue 項(xiàng)目，并介紹一些常用的命令和選項(xiàng)。

安裝 Vue CLI

要使用 Vue CLI，首先需要安裝 Node.js，版本要求是 8.9 或以上（推薦 10 以上）。然后可以使用 npm 或 yarn 來(lái)全局安裝 Vue CLI：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安裝完成后，可以在命令行中輸入 vue 來(lái)查看所有可用的命令和幫助信息。也可以輸入 vue --version 來(lái)查看 Vue CLI 的版本。

創(chuàng)建項(xiàng)目

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

vue create my-project

這個(gè)命令會(huì)在當(dāng)前目錄下創(chuàng)建一個(gè)名為 my-project 的文件夾，并在其中初始化一個(gè)基本的 Vue 項(xiàng)目。在創(chuàng)建過(guò)程中，會(huì)讓開(kāi)發(fā)者選擇一個(gè)預(yù)設(shè)的配置，或者自定義配置。預(yù)設(shè)的配置包括：

  • default：默認(rèn)配置，包含了 Babel 和 ESLint。
  • default (Vue 3 Preview)：默認(rèn)配置，但是使用了 Vue 3 的預(yù)覽版。
  • Manually select features：手動(dòng)選擇特性，可以自己選擇需要的插件和配置。

如果選擇了手動(dòng)選擇特性，那么會(huì)出現(xiàn)一系列的選項(xiàng)，讓開(kāi)發(fā)者根據(jù)自己的需求來(lái)勾選。例如：

  • Choose Vue version：選擇 Vue 的版本，可以是 2.x 或者 3.x。
  • Babel：是否使用 Babel 來(lái)轉(zhuǎn)譯代碼。
  • TypeScript：是否使用 TypeScript 來(lái)編寫代碼。
  • Progressive Web App (PWA) Support：是否支持 PWA。
  • Router：是否使用 Vue Router 來(lái)管理路由。
  • Vuex：是否使用 Vuex 來(lái)管理狀態(tài)。
  • CSS Pre-processors：是否使用 CSS 預(yù)處理器，例如 Sass、Less 或 Stylus。
  • Linter / Formatter：是否使用 ESLint 或 Prettier 來(lái)規(guī)范和格式化代碼。
  • Unit Testing：是否使用單元測(cè)試框架，例如 Jest 或 Mocha。
  • E2E Testing：是否使用端到端測(cè)試框架，例如 Cypress 或 Nightwatch。

在選擇完特性后，還會(huì)有一些額外的選項(xiàng)，例如：

  • Use class-style component syntax：是否使用類風(fēng)格的組件語(yǔ)法。
  • Use Babel alongside TypeScript：是否在 TypeScript 中使用 Babel。
  • Use history mode for router：是否在路由中使用 history 模式。
  • Pick a CSS pre-processor：選擇一個(gè) CSS 預(yù)處理器。
  • Pick a linter / formatter config：選擇一個(gè)代碼規(guī)范和格式化配置。
  • Pick additional lint features：選擇額外的代碼檢查特性。
  • Pick a unit testing solution：選擇一個(gè)單元測(cè)試解決方案。
  • Pick an E2E testing solution：選擇一個(gè)端到端測(cè)試解決方案。

最后，還會(huì)讓開(kāi)發(fā)者選擇是否將當(dāng)前的配置保存為一個(gè)新的預(yù)設(shè)，以便下次使用。

創(chuàng)建項(xiàng)目完成后，可以進(jìn)入項(xiàng)目目錄，并使用 npm run serve 或 yarn serve 命令來(lái)啟動(dòng)一個(gè)開(kāi)發(fā)服務(wù)器，然后在瀏覽器中訪問(wèn) http://localhost:8080 來(lái)查看項(xiàng)目的效果。

其他命令

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

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

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

總結(jié)

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

Vue.js

0 人點(diǎn)贊