vue-expert

用途

vue-expert 是一项面向 Vue 应用开发的技能，定位为资深 Vue 专家，专注于 Vue 3 Composition API、响应式系统以及现代 Vue 生态。它适用于需要从组件设计到工程化落地的 Vue 开发任务。

主要能力

构建使用 Composition API 模式的 Vue 3 组件。
配置 Nuxt 3 的 SSR/SSG 项目。
搭建 Pinia 状态管理。
脚手架化 Quasar/Capacitor 移动应用。
使用 Vue Test Utils 与 Vitest 编写组件测试。
通过 vue-tsc --noEmit 进行类型校验，并借助 Vue DevTools 验证响应式。
进行性能优化，包括减少重渲染、优化 computed 属性、懒加载。

使用方式（核心工作流）

分析需求：识别组件层级、状态需求与路由。
设计架构：规划 composables、stores 与组件结构。
实现：使用 Composition API 与正确的响应式方式构建组件。
验证：运行 vue-tsc --noEmit 检查类型错误；若发现错误，逐项修复并重新运行，直到输出干净为止。
优化：最小化重渲染、优化 computed、懒加载。
测试：使用 Vue Test Utils 与 Vitest 编写组件测试；若测试失败，检查失败输出，判断根因是组件缺陷还是测试断言问题，相应修复并重跑直至全部通过。

参考指南

技能按上下文加载参考文档：

Composition API：references/composition-api.md，适用于 ref、reactive、computed、watch、生命周期。
组件：references/components.md，适用于 Props、emits、slots、provide/inject。
状态管理：references/state-management.md，适用于 Pinia stores、actions、getters。
Nuxt 3：references/nuxt.md，适用于 SSR、基于文件的路由、useFetch、Fastify、hydration。
TypeScript：references/typescript.md，适用于 props 类型、泛型组件、类型安全。
移动与混合：references/mobile-hybrid.md，适用于 Quasar、Capacitor、PWA、service worker、移动端。
构建工具：references/build-tooling.md，适用于 Vite 配置、sourcemaps、优化、打包。

适用场景

需要以 Composition API 与 <script setup> 编写类型安全 Vue 3 组件的项目。
需要 Nuxt 3 SSR/SSG、Pinia 全局状态或 Vue Router 4 的应用。
需要 Quasar/Capacitor 构建移动或混合应用。
需要为 Vue 组件补充 Vitest 与 Vue Test Utils 测试的工程。

约束与偏好

必须遵循：使用 Composition API 而非 Options API；使用 <script setup> 语法；使用 TypeScript 类型安全的 props；原始值用 ref()、对象用 reactive()；派生状态用 computed()；使用正确的生命周期钩子（onMounted、onUnmounted 等）；在 composables 中实现正确的清理；使用 Pinia 进行全局状态管理。

禁止：使用 Options API（data、methods、computed 对象写法）；混用 Composition API 与 Options API；直接修改 props；不必要地创建响应式对象；在 computed 足够时使用 watch；忘记清理 watchers 与 effects；在 onMounted 之前访问 DOM；使用已弃用的 Vuex（以 Pinia 替代）。

输出模板

实现 Vue 功能时提供：包含 <script setup> 与 TypeScript 的组件文件；若存在可复用逻辑则提供 composable；若需要全局状态则提供 Pinia store；以及关于响应式决策的简要说明。

其他信息

该技能由 @jeffallan（Synergetic Solutions 首席顾问）维护。其知识参考涵盖 Vue 3 Composition API、Pinia、Nuxt 3、Vue Router 4、Vite、VueUse、TypeScript、Vitest、Vue Test Utils、SSR/SSG、响应式编程与性能优化。