vue生态都有哪些？

🧭 一、核心层（Vue 官方维护的核心生态）

分类	名称	作用说明
🧩 核心框架	Vue 3 (`vue`)	渐进式 JavaScript 框架，支持响应式组件开发
🧭 路由	Vue Router	官方路由系统，用于单页应用导航
🧠 状态管理	Pinia（取代 Vuex）	官方推荐的状态管理库，更轻量、更现代
⚙️ 构建工具	Vite	新一代前端构建工具，取代 webpack，官方推荐
🔌 开发环境插件	Vue Devtools	浏览器调试插件，查看组件树、响应式状态等
📜 脚手架	create-vue	官方 CLI，用于快速创建 Vue 3 项目

🧱 二、常用周边生态（社区主流支持）

分类	常用库	功能说明
🧭 路由增强	`vue-router` + `vue-router-next`	Vue 3 官方路由库
🔄 状态增强	`pinia-plugin-persistedstate`	Pinia 状态持久化（存 localStorage）
💅 样式工具	`Tailwind CSS`、`UnoCSS`、`WindiCSS`	原子化 CSS 框架
📦 组件库	`Element Plus`、`Naive UI`、`Ant Design Vue`、`Vuetify`、`Varlet`	主流 UI 库（支持 Vue 3）
📊 图表	`ECharts`、`v-charts`、`Chart.js`、`vue3-apexcharts`	可视化展示
🗺️ 地图	`vue3-amap`、`vue-baidu-map-3x`	地图组件封装
📡 网络请求	`Axios`、`Fetch API`、`Vue Query`	异步数据获取
🧩 表单	`VeeValidate`、`VueUseForm`、`FormKit`	表单验证与动态表单
🧰 实用工具库	`@vueuse/core`	Vue Hooks 工具集合（超级推荐🔥）
🧠 组合式函数库	`VueUse`	各种常用组合式函数（useMouse、useFetch等）

🧰 三、构建与工程化生态

分类	工具	功能
🧱 构建	Vite、Webpack	Vue 3 官方推荐使用 Vite
🧰 脚手架	create-vue 、Vite + `npm init vite@latest`	快速初始化项目
🧪 测试	`Vitest`、`Jest`、`Cypress`、`Playwright`	单元测试 + 端到端测试
🔧 类型支持	TypeScript	Vue 3 对 TS 原生支持更好
🧩 Lint 工具	ESLint + Prettier	代码规范与自动格式化
🧰 构建优化	unplugin 系列（unplugin-auto-import、unplugin-vue-components）	自动导入与组件按需加载

🧮 四、服务端渲染（SSR）与全栈生态

框架	特点
Nuxt 3	Vue 3 + Vite 的全栈 SSR 框架（相当于 Vue 的 Next.js）
Vike（原 Vite-SSR）	轻量级 SSR 框架
Inertia.js	Laravel + Vue 常用的前后端一体化方案

🎨 五、UI 组件生态（适配 Vue 3）

UI 库	说明
Element Plus	最流行的 Vue 3 UI 组件库
Naive UI	极简 + 可定制，开发体验优
Ant Design Vue	Ant Design 官方 Vue 版本
Vuetify 3	Material Design 风格
Varlet	移动端 Vue 3 组件库
TDesign Vue Next	腾讯 TDesign 的 Vue 3 实现
Arco Design Vue	字节跳动出品，设计规范现代

🧠 六、工具与辅助生态

工具	功能
VueUse	组合式 API 工具集，几乎是 Vue 3 必装库
Vue I18n	多语言国际化支持
Vue Meta / useHead	动态管理 `<head>` 标签
unplugin-auto-import	自动导入 Vue API
unplugin-vue-components	自动按需导入组件
vite-plugin-pages	自动生成路由
vite-plugin-vue-layouts	自动布局系统

🌐 七、SSR + 部署生态

工具	说明
Nuxt 3	官方级全栈框架，支持 SSR / SSG / API
VitePress	Vue 驱动的静态文档生成器（官方出品）
VuePress 2	Vue 3 驱动的博客文档框架
Netlify / Vercel	常用部署平台

🧩 八、移动端与跨平台

框架	说明
Uni-app	基于 Vue 的跨端框架（微信小程序、H5、App）
Taro + Vue3	多端小程序开发框架
Quasar	可构建桌面端、移动端、Web 的全平台框架
Capacitor + Vue	Vue 构建原生 App 的方案

🧭 九、可视化开发与低代码

工具	说明
Vue Flow / LogicFlow	可视化流程图框架
LowCodeEngine（阿里）	低代码引擎，支持 Vue
FormKit / Formily Vue	可配置表单引擎

🎯 小结（Vue 技术生态地图一览）

复制代码

Vue 3 核心
 ├─ Router（vue-router）
 ├─ State（Pinia）
 ├─ Build（Vite）
 ├─ UI（Element Plus / Naive UI / Ant Design Vue）
 ├─ SSR（Nuxt 3）
 ├─ Hooks（VueUse）
 ├─ 工具（Volar / Vue Devtools / ESLint）
 ├─ 构建增强（unplugin 系列）
 ├─ 国际化（Vue I18n）
 ├─ 测试（Vitest / Cypress）
 └─ 跨端（Uni-app / Quasar / Taro）