SuperAPI AI 工具集

vue-best-practices

前端与建站

查看项目

更新于 10-16 09:40

技能介绍

Vue Best Practices 是一套面向 Vue 3 + TypeScript 开发的最佳实践规则集合,目标是帮助开发者解决在使用 vue-tsc、Volar、Vite、Composition API、Vue Router 与 Pinia 过程中常见的类型检查、配置与性能问题。所有规则以独立 Markdown 文件形式提供,可通过 skill://vue-best-practices/rules/ 路径引用,并根据 SKILL.md 中的 IF-THEN 规则判断是否需要加载。

用途 本技能用于在 Vue 3 与 TypeScript 项目中排查和处理模板类型检查、模块解析、编辑器语言服务、Vite 插件以及测试相关问题。它本身不提供代码或运行时依赖,而是一组可查询的规则与说明。

主要能力 能力规则(Capability Rules)覆盖以下主题:

  • vue-tsc-strict-templates:捕获模板中未定义的组件,关键词包括 undefined component、template error、strictTemplates。
  • fallthrough-attributes:对透传属性($attrs、包装组件)进行类型检查。
  • strict-css-modules:捕获 CSS Module 类名拼写错误。
  • data-attributes-config:允许 data-* 属性。
  • volar-3-breaking-changes:修复 Volar 3.0 升级问题。
  • module-resolution-bundler:修复模块解析错误,涉及 @vue/tsconfig、moduleResolution。
  • unplugin-auto-import-conflicts:修复 unplugin 类型冲突。
  • codeactions-save-performance:修复大型项目保存缓慢问题。
  • duplicate-plugin-detection:检测重复的 Vite/Vue 插件。
  • define-model-update-event:修复 defineModel 更新事件未定义错误。
  • with-defaults-union-types:修复联合类型默认值问题。
  • deep-watch-numeric:Vue 3.5 中高效的数组监听。
  • vue-directive-comments:通过 @vue-ignore、@vue-skip 控制模板类型检查。
  • script-setup-jsdoc:为 script setup 添加 JSDoc。
  • vue-router-typed-params:修复路由参数类型(配合 unplugin)。 效率规则(Efficiency Rules)包括:
  • hmr-vue-ssr:修复 SSR 应用中的 HMR 热重载。
  • pinia-store-mocking:在 Vitest 中 mock Pinia store。

使用方式 每条规则对应一个可加载资源,例如 skill://vue-best-practices/rules/vue-tsc-strict-templates.md。使用者应根据 SKILL.md 中的 IF-THEN 规则,结合当前遇到的关键词或错误信息,判断加载哪一条规则文件。

适用场景 适用于使用 Vue 3 与 TypeScript 进行开发、并在模板类型检查、编辑器语言服务、Vite 插件配置、路由类型、Pinia 测试或构建性能方面遇到问题的场景。

限制 资料未提供该技能的收费、价格、平台要求或安装命令等信息,暂未提供。具体每条规则的内容需参考对应规则文件,本简介仅依据现有规则表整理。