最近發現vue兩大UI框架Element UI和Ant Design Vue都已經支持Vue3了，如果再不學習Vue3就落伍了，此文章記錄下使用@vue/cli搭建Vue3項目完整流程。

1 安裝vue/cli

更新到 3.x 之后，vue-cli 的包名從 vue-cli 改成了 @vue/cli，如果之前全局安裝了舊版本的 vue-cli (1.x 或 2.x)，首先需要使用以下命令卸載掉。

注：如果沒有安裝舊版本的 vue-cli 可以跳過卸載直接安裝

卸載npm?uninstall?vue-cli?-g
#?OR
yarn?global?remove?vue-cli?
安裝npm?install?-g?@vue/cli
#?OR
yarn?global?add?@vue/cli?

檢查

注：V要大寫

2 創建項目

提供兩種構建方式，一種是圖形化的方式創建項目，另外一種是命令行工具方式創建項目。

1.圖形化：首先還是得在指定目錄下打開終端，然后運行：

vue?ui

這里就不多講圖形化創建方式了，主要講下命令行方式。

2.命令行方式

vue?create?project-name

這里有三個選擇：

default ([Vue 2] babel, eslint) 默認套餐，提供 babel 和 eslint 支持。

default (Vue 3 Preview) ([Vue 3]babel, eslint)?新版本，Vue3預覽版本

Manually select features 自己去選擇需要的功能，提供更多的特性選擇。

如果選擇默認的，等待完成后就可以了，這里選擇了第三個，上下方向鍵切換選項，enter鍵選中

vue-cli 內置支持的功能特性，可以多選：使用空格鍵選中當前特性，對于每一項的功能，此處做個簡單描述：

• choose Vue version?選擇Vue版本

• Babel?處理ES6、ES7的新語法

• TypeScript 支持使用 TypeScript 書寫源碼。

• Progressive Web App (PWA) Support?PWA?支持。

• Router 支持?vue-router?。

• Vuex 支持?vuex?。

• CSS Pre-processors 支持 CSS 預處理器。

• Linter / Formatter 支持代碼風格檢查和格式化。

• Unit Testing 支持單元測試。

• E2E Testing 支持 E2E 測試。

這里選擇3.x

路由模式，選擇使用 history 路由模式，即輸入 y，按enter鍵

選擇ESLint + Prettier，enter鍵

選擇什么時候執行 eslint 校驗，我們選擇 Lint on save：

接下來是選擇以什么樣的形式配置以上所選的功能，方便統一管理和入手。選擇第二個

這個自己選擇，說的意思是這個配置是否以后項目的配置，N?回車，此時已經開始初始化我們項目

出現下面這種界面，說明項目已初始化完成，并且項目依賴也已全部下載完畢。

進入項目目錄，直接運行：

yarn?serve

啟動完成

至此項目已初始化完成并本地正常運行。

總結

以上是生活随笔為你收集整理的vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。