2020 年 9 月 18 日 Vue3 的正式發(fā)布已經(jīng)過(guò)去了大約 4 年 8 個(gè)月左右！?。?/p>

隨著 Vue3 版本的逐漸成熟，我們的前端世界也迎來(lái)了一系列令人振奮的更新和工具。Vue 生態(tài)圈的持續(xù)擴(kuò)大，無(wú)疑為前端開(kāi)發(fā)人員帶來(lái)了前所未有的便利。

今天，就讓我來(lái)為你揭秘 Vue3 開(kāi)發(fā)過(guò)程中生態(tài)工具的最佳組合，助你一臂之力，快速開(kāi)啟項(xiàng)目新篇章！

1. 腳手架

create-vue 是 Vue 官方推薦的項(xiàng)目初始化工具，用于快速搭建基于 Vue3 的項(xiàng)目，提供了一個(gè)簡(jiǎn)單快捷的方式來(lái)創(chuàng)建新的 Vue 項(xiàng)目

安裝：

npm create vue@latest

Github 倉(cāng)庫(kù)地址：https://github.com/vuejs/create-vue

2. TypeScript 語(yǔ)法支持

Vue3 完全支持 TypeScript，使得開(kāi)發(fā)者可以在項(xiàng)目中享受到 TypeScript 提供的類(lèi)型安全和開(kāi)發(fā)效率。

安裝：

npm install typescript --save-dev

Github 倉(cāng)庫(kù)地址：https://github.com/microsoft/TypeScript

3. 路由 vue-router V4

Vue Router V4 是官方的路由管理器，專(zhuān)為 Vue3 設(shè)計(jì)。它提供了一種聲明式的方式來(lái)定義導(dǎo)航和頁(yè)面路由，使得構(gòu)建單頁(yè)面應(yīng)用（SPA）變得更加容易

安裝：

npm install vue-router@4

Github 倉(cāng)庫(kù)地址：https://github.com/vuejs/router

4. 狀態(tài)管理 Pinia

Pinia 是 Vue 3 的官方狀態(tài)管理庫(kù)，它提供了一個(gè)直觀、類(lèi)型安全的狀態(tài)管理方式，并且易于與 TypeScript 集成。

安裝：

npm install pinia

Github 倉(cāng)庫(kù)地址：https://github.com/vuejs/pinia

另外推薦一款 Pinia 數(shù)據(jù)持久化插件： pinia-plugin-persistedstate，可以用來(lái)對(duì) Store 中的數(shù)據(jù)做本地持久化存儲(chǔ)

npm i pinia-plugin-persistedstate

Github 倉(cāng)庫(kù)地址：https://github.com/prazdevs/pinia-plugin-persistedstate

5. 構(gòu)件工具 Vite

Vite 是 Vue3 官方推薦的前端構(gòu)建工具，以其快速的熱更新和構(gòu)建速度而聞名，極大提升了開(kāi)發(fā)體驗(yàn)。

npm create vite@latest

Github 倉(cāng)庫(kù)地址：https://github.com/vitejs/vite

6. Hooks 工具函數(shù)庫(kù) VueUse

VueUse 是一個(gè)功能強(qiáng)大的 Vue.js 生態(tài)系統(tǒng)工具庫(kù)，它提供了一系列的可重用的 Vue 組件和函數(shù)，幫助開(kāi)發(fā)者更輕松地構(gòu)建復(fù)雜的應(yīng)用程序。

npm i @vueuse/core

Github 倉(cāng)庫(kù)地址：https://github.com/vueuse/vueuse

7. 代碼格式化工具 ESLint Prettier

ESLint 和 Prettier 的結(jié)合使用，幫助開(kāi)發(fā)者維護(hù)代碼質(zhì)量和風(fēng)格一致性。

(1) ESLint:

一個(gè)開(kāi)源項(xiàng)目，可幫助你查找和修復(fù) JavaScript 代碼中的問(wèn)題。它內(nèi)置于大多數(shù)文本編輯器中，你也可以在持續(xù)集成管道中運(yùn)行 ESLint。

安裝：

npm init @eslint/config@latest

Github 倉(cāng)庫(kù)地址：https://github.com/eslint/eslint

(2) Prettier:

一個(gè)支持多種編程語(yǔ)言和編輯器的代碼格式化工具，可以按保存鍵時(shí)自動(dòng)格式化代碼，節(jié)省時(shí)間和精力

安裝：

npm install --save-dev --save-exact prettier

Github 倉(cāng)庫(kù)地址：https://github.com/prettier/prettier

8. 原子化 css UnoCSS

UnoCSS 是一個(gè)原子化 CSS 引擎，可以自動(dòng)生成原子 CSS 類(lèi)，減少 CSS 的冗余并提高開(kāi)發(fā)效率。

安裝：

npm install -D unocss

Github 倉(cāng)庫(kù)地址：https://github.com/unocss/unocss

9. 組件庫(kù)

(1) Element Plus:

基于 Vue 3 的 Element UI 組件庫(kù)，提供了一套完整的 UI 組件。

安裝：

npm install element-plus --save

Github 倉(cāng)庫(kù)地址：https://github.com/element-plus/element-plus

(2) Naive UI:

一個(gè)風(fēng)格清新、易于使用的 Vue3 組件庫(kù)，尤大大力薦。

安裝：

npm i -D naive-ui

Github 倉(cāng)庫(kù)地址：https://github.com/tusen-ai/naive-ui

10. 調(diào)試工具

相信使用 Vue 的同學(xué)應(yīng)該對(duì) Vue Devtools 瀏覽器插件并不陌生，但是有些同學(xué)由于網(wǎng)絡(luò)問(wèn)題無(wú)法下載安裝插件，所以今天給大家推薦一款更好用的插件：vite-plugin-vue-devtools。

vite-plugin-vue-devtools插件，無(wú)需瀏覽器安裝，直接使用 npm 安裝即可使用，并且界面也很美觀，功能更加強(qiáng)大。

安裝：

npm add -D vite-plugin-vue-devtools

Github 倉(cāng)庫(kù)地址：https://github.com/webfansplz/vite-plugin-vue-devtools

11. 混合開(kāi)發(fā) uniapp

uni-app 是一個(gè)使用 Vue 語(yǔ)法的跨平臺(tái)開(kāi)發(fā)框架，可以編譯到 iOS、Android、Web（包括 Vue3）等平臺(tái)。

安裝：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

Github 倉(cāng)庫(kù)地址：https://github.com/dcloudio/uni-app

12. 桌面端開(kāi)發(fā) Vite-electron

Vite-electron 是一個(gè)基于 Vite 和 Electron 的桌面應(yīng)用開(kāi)發(fā)框架，允許開(kāi)發(fā)者使用 Vue3 開(kāi)發(fā)桌面應(yīng)用。

安裝：

npm i electron-vite -D

Github 倉(cāng)庫(kù)地址：https://github.com/alex8088/electron-vite

13. 靜態(tài)站點(diǎn)生成 VitePress

VitePress 是一個(gè)靜態(tài)站點(diǎn)生成器，基于 Vue3 和 Vite，專(zhuān)為構(gòu)建快速、以?xún)?nèi)容為中心的網(wǎng)站而設(shè)計(jì)。

安裝：

npm add -D vitepress

Github 倉(cāng)庫(kù)地址：https://github.com/vuejs/vitepress

14. 服務(wù)端渲染框架 Nuxt

Nuxt 是一個(gè)基于 Vue 的框架，提供了服務(wù)端渲染（SSR）、靜態(tài)生成（SSG）和 PWA 等功能，非常適合構(gòu)建高性能的 Web 應(yīng)用。

安裝：

npx nuxi@latest init <project-name>

Github 倉(cāng)庫(kù)地址：https://github.com/nuxt/nuxt