Learn
Vue/21-vue-ecosystem-packages

Vue 开发生态 npm 包

这是 Vue 开发生态里最常用的 npm 包一览。配合第 3、12、16、17 章用过的具体库，这里把它们按用途分类，并给出 React 生态对照——方便你从 React 迁移时快速找到等价物。

1. 路由

用途Vue 生态React 对照
官方路由vue-routerreact-router / react-router-dom
基于文件的路由（元框架内）Nuxt 内置Next.js 内置 / react-router

2. 状态管理

用途Vue 生态React 对照
官方 Storepiniazustand / Redux Toolkit / jotai
轻量原子状态vue-reactivityjotai / recoil
全局响应式原语vue（reactive/ref 本身即可导出复用）—

Pinia 是 Vue 事实标准；React 那边没有官方状态库，社区选择分散（Redux / Zustand / Jotai）。

3. 服务端数据 / 请求

用途Vue 生态React 对照
服务端状态（缓存/失效/重试）@tanstack/vue-query（原 Vue Query）@tanstack/react-query
GraphQL@vue/apollo-composable / villus@apollo/client / urql
轻量 fetch 封装自己写 useFetch（见第 16 章）swr / react-query

4. 组合式工具集（VueUse）

#vueuse 是 Vue 版的「lodash for composition」——几百个即用组合式函数：

包说明React 对照
@vueuse/coreuseStorage / useDark / useMouse / useFetch / useIntersectionObserver 等ahooks / react-use
@vueuse/head管理 <head>（title/meta，利于 SEO）react-helmet
@vueuse/router把路由 query 绑定成 ref—

5. UI 组件库

包特点React 对照
element-plus国内最流行，中后台利器Ant Design
naive-uiTypeScript 优先、轻量Ant Design
vuetifyMaterial Design 风格MUI
primevue企业级、组件全primereact
ant-design-vueAnt Design 的 Vue 版Ant Design
headlessui（@headlessui/vue）无样式、可访问性优先@headlessui/react
radix-vue无样式原语（类 Radix）@radix-ui/react

6. SSR / 元框架

包说明React 对照
nuxtVue 的 SSR/SSG 元框架next
vite-ssr / @vue/server-renderer手写 SSR 底层react-dom/server
vitepressVue 驱动的文档/静态站（本站点底层思路类似）nextra / Docusaurus

7. 构建 / 脚手架

包说明React 对照
vite官方推荐构建工具（极快 HMR）vite / webpack / next 内置
@vitejs/plugin-vueVite 的 Vue 插件@vitejs/plugin-react
vue-tscVue 模板的 TypeScript 类型检查tsc / fork-ts-checker
@vue/cli（旧）老脚手架，新项目请用 Vitecreate-react-app（已不推荐）

8. 表单

包说明React 对照
vee-validate表单校验 + 提交react-hook-form / Formik
yup / zodSchema 校验（配合 vee-validate）yup / zod
@vueuse/integrations接 `useForm` 等—

9. 测试

包说明React 对照
@vue/test-utils组件测试工具@testing-library/react
vitest单元测试（与 Vite 同源）vitest / jest
@testing-library/vueDOM 行为测试@testing-library/react
cypress / playwrightE2E（通用）cypress / playwright

10. 类型 / Lint / 格式化

包说明React 对照
vue-tsc<script setup> + 模板类型检查tsc
eslint-plugin-vueVue 专属 ESLint 规则eslint-plugin-react
@typescript-eslint/*TS 规则同左
prettier格式化（通用）prettier

11. 国际化 i18n

包说明React 对照
vue-i18nVue 官方国际化react-i18next / i18next
@vueuse/i18n组合式封装—

12. 动画 / 可视化

包说明React 对照
@vueuse/motion声明式动画framer-motion
gsap通用动画引擎（配合 <Transition> JS 钩子）gsap
echarts / vue-echarts图表recharts / echarts
d3底层可视化（通用）d3

13. 一个「最小生产栈」建议

vite + vue-tsc          # 构建 + 类型
vue-router              # 路由
pinia                   # 状态
@tanstack/vue-query     # 服务端数据
element-plus / naive-ui # UI
vee-validate + zod      # 表单
vue-i18n                # 国际化
vitest + @vue/test-utils# 测试
eslint-plugin-vue       # 规范

从 React 过来的人可以这么记：vue-router↔react-router、pinia↔zustand、@tanstack/vue-query↔react-query、@vueuse/core↔ahooks、element-plus↔Ant Design、nuxt↔next、vue-i18n↔react-i18next。心智模型一致，只是 API 风格从「Hook + 依赖数组」变成「组合式函数 + 无依赖数组」。

小结

  • Vue 生态覆盖路由(Pinia/vue-router)、数据(Vue Query)、组合式(VueUse)、UI(Element Plus 等)、SSR(Nuxt)、构建(Vite)、表单(vee-validate)、测试(vitest)、i18n(vue-i18n)、动画等
  • 与 React 生态高度同构，绝大多数场景都能找到一对一等价包
  • 新项目推荐 Vite + Pinia + Vue Query + Element Plus/Naive UI 这一组合
🎯练习 1：迁移对照

你有一个 React 项目用了 zustand + react-query + react-hook-form + next。要迁到 Vue，分别用什么包？

🎯练习 2：选 UI 库

要做一个国内中后台系统，看重「组件全、中文文档好、团队熟悉」。从生态里选哪个 UI 库最合适？说明理由。

🎯练习 3：最小栈里为什么有 vue-tsc 也要 vite？

「最小生产栈」里同时列了 vite 和 vue-tsc，它们职责有何不同？漏掉 vue-tsc 会怎样？