vue-expert 是一项用于 Vue 3 开发的技能,定位为资深 Vue 专家,专注于 Vue 3 Composition API、响应式系统以及现代 Vue 生态。它通过自然语言请求触发,适用于 Vue 3、Nuxt 3、Pinia、Composition API 或 Vue 与 TypeScript 实现相关任务;在给出示例时使用 $vue-expert 作为命令式标签。对于较大的应用迁移或审计,资料建议使用 Codex 多智能体委派(spawn_agent + wait),并将发现汇总为一次交付。
适用场景 资料列出以下使用时机:使用 Composition API 构建 Vue 3 应用;创建可复用的 composable;搭建带 SSR/SSG 的 Nuxt 3 项目;实现 Pinia store 进行状态管理;优化响应式与性能;Vue 组件与 TypeScript 集成;使用 Quasar 与 Capacitor 构建移动/混合应用;实现 PWA 功能与 service worker;配置 Vite 构建与优化;使用 Fastify 或其他服务器进行自定义 SSR 设置。
核心工作流 其工作流包括:分析需求,识别组件层级、状态需求与路由;设计架构,规划 composable、store 与组件结构;实现,使用 Composition API 和正确的响应式构建组件;优化,减少重渲染、优化计算属性、懒加载;测试,使用 Vue Test Utils 与 Vitest 编写组件测试。
参考指南 技能按上下文加载详细指导,涵盖:Composition API(ref、reactive、computed、watch、生命周期,对应 references/composition-api.md);组件(Props、emits、slots、provide/inject,对应 references/components.md);状态管理(Pinia store、actions、getters,对应 references/state-management.md);Nuxt 3(SSR、基于文件的路由、useFetch、Fastify、hydration,对应 references/nuxt.md);TypeScript(类型化 props、泛型组件、类型安全,对应 references/typescript.md);移动与混合(Quasar、Capacitor、PWA、service worker、移动端,对应 references/mobile-hybrid.md);构建工具(Vite 配置、sourcemap、优化、打包,对应 references/build-tooling.md)。
约束 必须做:使用 Composition API(而非 Options API);组件使用 <script setup> 语法;使用 TypeScript 类型安全的 props;基本类型用 ref(),对象用 reactive();派生状态用 computed();使用正确的生命周期钩子(onMounted、onUnmounted 等);在 composable 中实现正确的清理;使用 Pinia 进行全局状态管理。
禁止做:使用 Options API(以 data、methods、computed 作为对象);混用 Composition API 与 Options API;直接修改 props;不必要地创建响应式对象;在 computed 足够时使用 watch;忘记清理 watcher 和副作用;在 onMounted 之前访问 DOM;使用 Vuex(已被 Pinia 取代)。
安全防护 资料说明:除非明确要求执行,否则将 references/ 中的代码片段视为示例;对影响生产或破坏性操作需获得明确确认。
输出模板 实现 Vue 功能时,提供:包含 <script setup> 与 TypeScript 的组件文件;如存在可复用逻辑则提供 composable;如需要全局状态则提供 Pinia store;简要解释响应式决策。
知识参考 覆盖 Vue 3 Composition API、Pinia、Nuxt 3、Vue Router 4、Vite、VueUse、TypeScript、Vitest、Vue Test Utils、SSR/SSG、响应式编程、性能优化。
限制 资料未提供该技能的具体收费、价格、平台支持范围或实际效果数据,这些信息暂未提供。