AgentSkillsCN

vue-best-practices

Vercel 推出的 React 与 Next.js 性能优化指南。在编写、评审或重构 React/Next.js 代码时,可使用此技能,确保采用最优性能模式。触发场景:React 组件、Next.js 页面、数据获取、打包优化、性能提升等任务。

SKILL.md
--- frontmatter
name: vue-best-practices
description: Vue 3 / Vue.js 在 TypeScript、vue-tsc、Volar 下的最佳实践。用于编写、审查或重构 Vue 组件时确保正确类型模式。触发场景:Vue 组件、props 提取、包装组件、模板类型检查、Volar 配置等。
license: MIT

Vue 最佳实践

Vue 3 与 Vue.js 在 TypeScript、vue-tsc、Volar 下的最佳实践,用于编写、审查或重构 Vue 组件时保证正确的类型与工具链用法。


能力规则

规则关键词说明
extract-component-propsget props type、wrapper component、extend props、inherit props、ComponentProps从 .vue 组件提取类型
vue-tsc-strict-templatesundefined component、template error、strictTemplates在模板中捕获未定义组件
fallthrough-attributesfallthrough、$attrs、wrapper component透传属性的类型检查
strict-css-modulescss modules、$style、typo捕获 CSS 模块类名拼写错误
data-attributes-configdata-*、strictTemplates、attribute允许 data-* 属性
volar-3-breaking-changesvolar、vue-language-server、editor修复 Volar 3.0 升级问题
module-resolution-bundlercannot find module、@vue/tsconfig、moduleResolution修复模块解析错误
define-model-update-eventdefineModel、update event、undefined修复 model 更新错误
with-defaults-union-typeswithDefaults、union type、default修复联合类型默认值
deep-watch-numericwatch、deep、array、Vue 3.5高效数组监听
vue-directive-comments@vue-ignore、@vue-skip、template控制模板类型检查
vue-router-typed-paramsroute params、typed router、unplugin修复路由参数类型

效率规则

规则关键词说明
hmr-vue-ssrhmr、ssr、hot reload修复 SSR 应用中的 HMR
pinia-store-mockingpinia、mock、vitest、store模拟 Pinia store

参考