用途:用于构建、重构或审查 Vue 3.5+ 的 SFC(单文件组件)与 composables,采用惯用的 TypeScript 写法,适用于组件、框架页面与布局中的 Vue 组件机制。当项目显式指令或强制 lint 规则与本技能冲突时,以项目规则为准;指令未覆盖的细节参考邻近代码。若存在 Web 界面约定,也适用于框架无关的 HTML、CSS、可访问性、内容与用户行为。
主要能力:规范 SFC 结构(template、script、style 顺序,script setup lang=ts,导出类型放独立 script 块);导入与 TypeScript 约定(显式导入 Vue API,按项目路径别名与导入顺序);props(命名 Props 接口、defineProps<Props>()、响应式解构默认值、Boolean 隐式 false);composables(仅在有复用行为或状态逻辑时抽取,camelCase 且以 use 开头,返回普通对象,用 toValue() 归一化,副作用需自带清理);emits 与 models(命名 Emits 类型、defineModel() 用于双向绑定、defineEmits() 用于普通事件);模板逻辑(派生渲染值放 computed,保持简单绑定内联);模板引用与浏览器 API(useTemplateRef、useId、SSR 安全);样式(style module、.component 根类、CSS Modules 绑定);组件边界(Nuxt 页面与布局仅限模板/脚本/CSS 机制,Pinia、测试、E2E 交由对应技能)。
使用方式:编辑前先检查目标 SFC 或 composable、相关调用方或子组件及邻近相似文件,判断改动应落在 SFC、composable、路由、store 还是测试。保留公共 props、默认值、emits、models、slots 与 Vue 样式钩子,除非任务要求更改。优先复用已有本地 composables 与 Vue 组件 API。完成后列出所有改动的 SFC 与 composable,检查 props、响应式来源、命名 Emits、models、派生渲染值、slot 检查、事件处理器、模板引用与 CSS Module 绑定,并运行项目检查。
适用场景:Vue 3.5+ 组件与组合式函数的日常开发、重构与代码审查。
限制:不覆盖 Nuxt 插件、中间件、Nitro、路由、useFetch、useAsyncData、$fetch、运行时配置,也不覆盖 Pinia 状态形状、单元/组件测试与 E2E 流程,这些应使用对应专用技能或仓库约定。资料未提供具体安装命令、收费或平台信息。