生态与工具链(Ecosystem & Tooling)
本子主题收录 Vue 生态与工具链 的中文文档:Vue 官方指南(Guide)中「应用规模化」与「工具链」一章提到的各生态项目——路由(Vue Router)、状态管理(Pinia)、构建与测试(Vite / Vitest)、常用组合式函数库(VueUse)等,按各项目官方中文站镜像收录,与本栏目的 Vue 3 官方指南、API 参考配套阅读。
镜像来源:https://router.vuejs.org/zh/、https://pinia.vuejs.org/zh/、https://cn.vite.dev/、https://cn.vitest.dev/、https://vueuse.org/。
收录状态
| 生态项目 | 定位 | 本子主题子目录 | 状态 |
|---|---|---|---|
| Vue Router | Vue 官方路由:URL 映射、导航守卫、嵌套路由 | router/ | ✅ 首批 8 页已收录(入门 / 安装 / 历史模式 / 动态匹配 / 嵌套路由 / 重定向别名 / 编程式导航 / 导航守卫);其余核心页按批次补充 |
| Pinia | Vue 官方状态管理:store / state / getters / actions | pinia/ | ✅ 核心概念 8 页已收录(简介 / 开始 / 定义 Store / State / Getter / Action / 插件 / 组件外的 Store) |
| Vite | 下一代构建工具:dev server、构建、插件 | vite/ | ✅ 精选 6 页已收录(开始 / 为什么选 Vite / 功能 / 命令行接口 / 使用插件 / 构建生产版本) |
| Vitest | 由 Vite 驱动的测试运行器 | vitest/ | ✅ 精选 4 页已收录(快速起步 / 为什么是 Vitest / 主要功能 / 命令行界面) |
| VueUse | 组合式函数工具集(精选速查) | vueuse/ | ✅ 已收录(开始 / 精选函数速查,共 2 页) |
状态说明:✅ 已收录 / 🚧 进行中 / 🔲 规划中(按批次陆续补充,与
frontend/index.md规划清单同步)。
快速入口
Vue Router(官方路由)
- 入门 — SPA 客户端路由的核心概念与最小示例
- 安装 — 包管理器 / CDN 引入方式
- 不同的历史模式 — HTML5 / Hash / Memory 三种模式与服务器回退配置
- 带参数的动态路由匹配 —
:id路径参数、响应参数变化、404 捕获路由 - 嵌套路由 —
children配置与多层router-view - 重定向和别名 —
redirect/alias的静态与函数式写法 - 编程式导航 —
router.push/replace/go与编码规则 - 导航守卫 — 全局 / 路由独享 / 组件内守卫与完整解析流程
Pinia(官方状态管理)
- 简介 — 为什么用 Pinia、与 Vuex 对比
- 开始 — 安装、注册 pinia 实例、Store 是什么
- 定义 Store — Option Store / Setup Store、
storeToRefs() - State — 定义与访问、
$reset()、$patch()、$subscribe() - Getter — 计算值、传入参数、跨 store 访问
- Action — 异步 action、
mapActions()、$onAction() - 插件 — 扩展属性 / state、新选项与 TS 类型标注
- 在组件外使用 store — pinia 实例注入时机与路由守卫用法
Vite(构建工具链)
- 开始 — 总览、搭建项目、
index.html与项目根目录 - 为什么选 Vite — 原生 ESM 与预构建、Rolldown 统一工具链
- 功能 — HMR、TS/JSX、CSS 与预处理器、静态资源、Glob 导入、WASM、Workers、构建优化
- 命令行接口 —
vite/vite build/vite preview选项速查 - 使用插件 — 添加插件、
enforce排序、apply按需应用 - 构建生产版本 — 浏览器兼容性、base、分块、多页面与库模式
Vitest(测试运行器)
- 快速起步 — 安装、编写并运行第一个测试、配置与 IDE 集成
- 为什么是 Vitest — 与 Vite 共享转换流水线、兼容 Jest API
- 主要功能 — 监听模式、并发、快照、Mocking、覆盖率、内联测试、基准与类型测试
- 命令行界面 — 命令与常用选项速查(覆盖率、报告器、浏览器模式、分片)
VueUse(组合式函数工具集)
- 开始 — 安装、CDN、Nuxt 模块与基础用法示例
- 精选函数速查 — 按 State / Elements / Browser / Sensors / Network / Animation / Component / Watch / Reactivity / Array / Time / Utilities 分类的常用函数清单,另附各附加包概览
相关说明
- 各镜像页保留官方站点出处与示例;代码示例默认组合式 API(
<script setup>)+ 单文件组件。 - 官网在线版(含最新内容与交互演示):https://router.vuejs.org/zh/、https://pinia.vuejs.org/zh/。
- 与本栏目 Vue 3 指南中对应页面的关系:
scaling-up/routing(路由选型)→ 本子主题router/(完整文档);scaling-up/state-management→ 本子主题pinia/;scaling-up/tooling(工具链总览)→ 本子主题vite/、vitest/。