Vue3全家桶都有谁？这张图让你一目了然

从Vite到Pinia，从VueUse到Element Plus，Vue3生态圈里的这些朋友，你都认识吗？

刚转Vue3那会儿，我有点懵。

Vue2时代，全家桶就那几样：Vue + Vue Router + Vuex + Vue CLI，简单明了。到了Vue3，突然冒出来一堆新名词：Vite是什么？Pinia又是谁？VueUse能干啥？

花了点时间理清楚之后，我发现Vue3的生态其实比Vue2更丰富，而且很多工具是真的好用。这篇文章就带你认识一下Vue3全家桶的新成员们。

先看全景图

image-20251203194609428

别被这一堆名字吓到，咱们一个个来认识。

Vue2 vs Vue3 全家桶对照表

先放一张对照表，方便Vue2老用户快速对应：

加粗的是推荐替换的工具。

构建工具：Vite

一句话介绍：下一代前端构建工具，启动快到飞起。

Vite官网首页

Vite官网：Next Generation Frontend Tooling

如果你还在用Vue CLI（基于Webpack），强烈建议试试Vite。

Vite vs Webpack 启动速度对比：

image-20251203194846220

我第一次用Vite启动项目的时候，以为命令没执行完，结果发现已经跑起来了。那种感觉，用过Webpack的人都懂。

核心优势：

• 开发环境用原生ESM，不需要打包
• 热更新毫秒级响应
• 开箱即用，配置极简

路由：Vue Router 4

一句话介绍：Vue官方路由库，Vue3专属版本。

Vue Router 4是专门为Vue3设计的，核心概念没变，主要是API写法有些调整。

主要变化对比：

// Vue3中使用路由的标准写法
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()  // 路由实例
const route = useRoute()    // 当前路由信息

router.push('/home')        // 跳转
console.log(route.params.id) // 获取参数

状态管理：Pinia

一句话介绍：Vuex的替代者，更简单、更轻量、类型更安全。

Pinia官网

Pinia官网：那只小菠萝太可爱了

Pinia现在是Vue官方推荐的状态管理库，Vuex已进入维护模式。

Pinia vs Vuex 对比：

image-20251203195349145

为什么Pinia更香？

一句话总结：Pinia = Vuex - Mutations - 复杂度 + 更好的TS支持

工具库：VueUse

一句话介绍：200+个开箱即用的Composition API工具函数。

VueUse官网

VueUse：Collection of Vue Composition Utilities

VueUse是我用了之后离不开的库。它提供了大量常用的composables，省了我写很多重复代码。

常用功能速览：

真的，用了VueUse之后，很多轮子都不用自己造了。

UI框架选择指南

Vue3的UI框架选择很多，这里给个快速选择指南：

image-20251203195525554

我的选择：后台管理系统用Element Plus（生态好、文档全），移动端用Vant。

开发工具

Vue Devtools

浏览器调试扩展，Vue开发必备。

核心功能：

• 组件树查看和状态编辑
• Pinia状态调试
• 路由调试
• 性能分析

Volar

VS Code扩展，取代了Vue2时代的Vetur。

注意：如果你同时装了Vetur和Volar，记得禁用Vetur，否则会冲突。

推荐技术栈组合

🎓 入门学习

Vue 3 + Vite + Vue Router 4 + Pinia

足够学习Vue3核心特性，配置简单。

🏢 后台管理系统

Vue 3 + Vite + TypeScript + Vue Router 4 + Pinia + Element Plus + VueUse

这是目前后台项目的标准配置。

📱 移动端项目

Vue 3 + Vite + TypeScript + Vue Router 4 + Pinia + Vant 4

🌐 需要SEO的项目

Nuxt 3 + Pinia

Nuxt 3内置了很多功能，路由都不用自己配。

小结

Vue3生态核心成员和学习优先级：

下一篇我们就从Vite开始，手把手创建第一个Vue3项目。

下一篇预告：告别Webpack，Vite让我的项目启动从30秒变成1秒

5分钟用Vite创建Vue3项目，感受一下什么叫"秒级启动"。