点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群

2020 年 9 月 18 日，Vue3 正式发布。

五年时光如白驹过隙，Vue3已经从当年的"新锐"成长为如今前端开发的中流砥柱。 可我依然听到很多犹豫的声音：

• “Vue3 还不够稳定，再看看”

• “我们的项目还在 Vue2，迁移成本太高”

• “学起来太复杂，等业务不忙再说”

等着等着，身边的团队已经用 Vue3 上了几个大项目；

等着等着，Vue3 的生态已经全面升级到比 Vue2 快一大截。

今天这篇文章，不跟你空谈“Vue3 多先进”，而是一起看看 Vue3生态 中那些让开发变得愉悦的工具。

项目快速起步

create-vue

create-vue 是 Vue 官方推荐的初始化项目脚手架工具，用于快速搭建基于 Vue3 应用。 只需要执行一句命令：

# npm | yarn | pnpm | bun
npm create vue@latest

没有繁杂的配置，如果不确定是否要开启某个功能，你可以直接按下回车键选择 No，就可以快速创建一个Vue3项目！

Nuxt - 服务端渲染

如果一开始就明确需要 SSR(服务端渲染)、SSG（静态生成）、PWA（渐进式 Web 应用） 等功能，可以直接用 Nuxt，从Nuxt 3 开始就完全支持 Vue3，目前最新版本是Nuxt 4.

官网地址：https://nuxt.com

快速创建一个新的项目：

# npm | yarn | pnpm | bun | deno
npm create nuxt@latest <project-name>

uniapp 跨平台开发

如果你希望用同一套 Vue3 代码同时发布到 IOS、Android、H5、微信小程序 等平台，uni-app 是最佳选择。它原生支持 Vue3 语法，并且支持 Vite 构建模式，开发体验流畅。

官网地址： https://uniapp.dcloud.net.cn/

快速创建一个 Vue3 + Vite 项目模板：

可以通过使用uniapp开发者工具 HBuilder X快速创建：

也可通过命令行克隆官方 Vue3 模板：

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

桌面应用 electron-vite

上面描述了网页端、手机端， 那如果你想使用Vue3 做一个跨平台的桌面应用（Windows / macOS / Linux），Vite + Electron 是一个高效组合。

electron-vite 帮你把 Vite 的极速构建、热更新体验带到桌面端开发，同时保留 Electron 的原生 API 能力，让你既能写前端页面，也能调用系统功能。

快速创建项目：

前提条件

electron-vite 需要 Node.js 版本 20.19+, 22.12+ 和 Vite 版本 5.0+

npm i electron-vite -D

核心开发库

路由 vue-router v4

Vue Router v4 是 Vue 官方为 Vue 3 生态量身打造的路由管理器，它不仅支持声明式路由配置，还能与 Vue 3 的 Composition API 深度结合。通过它，你可以轻松管理单页面应用（SPA）的页面导航、动态路由、路由守卫以及过渡动画等功能。

对于一个现有的使用 JavaScript 包管理器的项目，你可以从 npm registry 中安装 Vue Router：

npm install vue-router@4

你可能也发现使用 create-vue脚手架可以直接选择 Vue Router 选项

状态管理 Pinia

Pinia 是 Vue 3 官方推荐的状态管理库，也是 Vuex 的轻量化继任者。

它提供了简单直观的 API，支持模块化状态、持久化、热更新（HMR）。

Pinia 在设计上强调类型安全和开发体验，与 TypeScript 无缝集成，让你在开发时就能获得智能提示和类型检查。同时，它去掉了 Vuex 中的 mutations 概念，直接通过函数修改状态，使代码更加简洁易读。

安装：

# npm | yarn | pnpm
npm install pinia

组合式 API 工具集 VueUse

一个 vue 开发者都应该知道的工具 VueUse

VueUse 是一个基于 Vue 3 组合式 API 的实用函数库，收集了数百个开箱即用的 Composables（可复用逻辑函数），涵盖状态管理、浏览器 API 封装、动画、传感器数据等多个场景。

让你几行代码就能实现剪贴板、网络状态检测、鼠标位置跟踪等效果。

表单验证 VeeValidate

VeeValidate，提供直观、灵活的表单验证方案。从 v4 版本起，完全重写以支持 Vue 3 和 Composition API。

它支持 响应式验证规则、自定义规则、表单状态追踪。使用 VeeValidate，你可以轻松管理复杂表单的校验逻辑、显示错误提示，并且无需手动操作 DOM，提高开发效率。

官网地址：https://vee-validate.logaretm.com/v4

原子化 css UnoCSS

一个 Vue 3 开发者必备的原子化 CSS 工具 UnoCSS。

UnoCSS 是一个 按需生成 的原子化 CSS 引擎，灵感来源于 Tailwind CSS 和 Windi CSS，但更轻量、更灵活。它不会提前生成庞大的样式表，而是根据你模板中实际使用的类名即时生成所需的 CSS，大幅减少无用样式和打包体积。

安装：

# npm | yarn | pnpm | bun
npm install -D unocss

在 vite.config.ts配置：

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

官网地址：https://unocss.dev/

UI组件库

Element Plus

Element Plus 是 Element UI 的 Vue 3 版本，由饿了么前端团队维护。它延续了 Element UI 在国内的高人气和完善的桌面端组件体系，提供了丰富的基础组件和业务组件，适合中后台管理系统的快速搭建。

它支持 TypeScript、国际化、多主题定制，并提供详细的文档和示例，帮助开发者快速上手。

# npm | yarn | pnpm
npm install element-plus

在 main.ts 中引入：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

ant-design-vue

Ant Design Vue 是 Ant Design 的 Vue 3 实现版本，遵循 Ant Design 的设计体系，强调简洁、美观和一致性。

它提供了丰富的高质量 UI 组件，内置响应式布局系统、国际化支持，以及完善的 TypeScript 类型定义，非常适合构建中大型企业级应用。

# npm | yarn | pnpm
npm install ant-design-vue

在 main.ts 中引入：

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
app.use(Antd)

Naive UI

Naive UI 是一个 Vue 3 原生的现代化 UI 组件库，拥有简洁的 API 和高度可定制的主题系统。

它提供了超过 80+ 的可复用组件，支持暗色模式、按需引入和完整的 TypeScript 类型推导，开发体验流畅。文档设计简洁直观，组件演示与代码示例并排展示，便于查阅与使用。

安装：

# npm | yarn | pnpm
npm install naive-ui

在 main.ts 中引入：

import naive from 'naive-ui'
app.use(naive)

调试与测试

Vue DevTools

Vue DevTools 是 Vue 官方提供的浏览器开发者工具扩展。

它可以让你在浏览器中直观地查看组件树、实时监控状态变化、调试 Pinia 或 Vuex 状态、跟踪路由变化以及查看事件触发。对于调试 Vue 应用和优化性能非常有帮助，是每个 Vue 开发者必备的工具。

安装与使用：

1. Chrome / Firefox 扩展商店搜索 Vue.js devtools 安装即可。

1. 在开发模式下打开你的 Vue 3 应用，就可以在浏览器开发者工具中使用组件树、状态面板和事件面板。

vite-plugin-vue-devtools

vite-plugin-vue-devtools 是一个 Vite 插件，它允许你在 开发环境中自动启用 Vue DevTools，无需手动安装浏览器扩展。

使用它，你可以直接在页面中调试 Vue 3 组件、查看 Pinia 状态、路由信息等，非常适合快速调试和开发阶段使用。

安装：

# npm | yarn | pnpm
npm install vite-plugin-vue-devtools -D

在 vite.config.ts 中配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vue(),
    VueDevTools(),
  ],
})

Vitest

Vitest 是一个基于 Vite 构建的现代化单元测试框架，专为 Vue 3 和 Vite 项目设计。

它具有极快的启动速度和热重载能力，支持 TypeScript、ES 模块以及 Vue SFC（单文件组件）的直接测试。Vitest API 与 Jest 类似，让你可以快速上手，同时提供了内置断言、快照测试、模拟函数和并行执行功能，非常适合现代前端开发流程。

官网地址: https://vitest.dev/

安装与使用：

# npm | yarn | pnpm
npm install -D vitest

在 package.json 中添加脚本：

{
  "scripts": {
    "test": "vitest"
  }
}

在 Vue 3 项目中，可以直接测试组件：

import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import MyButton from './MyButton.vue'

describe('MyButton', () => {
  it('renders properly', () => {
    const wrapper = mount(MyButton)
    expect(wrapper.text()).toContain('Click me')
  })
})

静态站点生成器

VitePress

VitePress 是 Vue 官方推出的静态网站生成器（SSG），基于 Vite 构建，专为 文档和博客 场景设计。

它具有极快的启动速度和热重载能力，完美支持 Vue 3 组件 在 Markdown 中使用，同时兼容 Vue 3 的 Composition API。VitePress 简洁轻量，默认主题美观，并且易于自定义布局和主题，是搭建技术文档、个人博客或组件库文档的理想选择。

安装与使用：

# npm | yarn | pnpm
npm install -D vitepress

在 package.json 中添加脚本：

{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  }
}

这些真实使用场景和工具组合告诉我们——Vue3 在 2025 年，不是未来，而是必选项。

你还知道哪些好用的工具或者优质库， 欢迎留言讨论

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞、在看” 支持一波👍