SuperAPI AI 工具集

vue-best-practices

前端与建站

查看项目

更新于 10-16 09:59

技能介绍

用途:为 Vue.js 3 应用提供成体系的编码规范,帮助写出符合习惯、可维护且可扩展的代码;适用于编写新组件或组合式函数、使用 Composition API 实现功能、审查代码、重构现有代码、搭建组件架构、开发 Nuxt.js 应用,以及用 Tailwind CSS 或 PrimeVue 构建界面。

主要能力按规则类别组织:Composition API(优先 script setup,ref 用于基本值、reactive 用于对象,派生状态用 computed,watch 仅处理副作用,逻辑抽成 composables);组件设计(单一职责、PascalCase 命名、控制行数、插槽复用、谨慎使用 defineExpose);响应式(const 声明 refs、模板中自动解包、大数据用 shallowRef、toRefs 解构);Props 与事件(defineProps/defineEmits 类型化、withDefaults 设默认值、不可直接修改 props);模板(v-if 与 v-show 区分、v-for 必须唯一 key、复杂表达式移入 computed);代码组织(按功能分目录、composables 独立目录、文件共置);TypeScript(泛型组件、接口定义 props、显式 emit 载荷、模板引用类型);错误处理(onErrorCaptured 错误边界、异步错误捕获、回退 UI)。Tailwind CSS 部分涵盖工具优先、类名顺序、移动优先断点、使用完整类名字符串、状态与暗色变体;PrimeVue 部分要求按原生 API 与文档使用,仅通过设计令牌和 definePreset() 定制主题,禁止用 PassThrough API 重设样式、禁止 unstyled 模式、禁止仅为覆盖样式而包装组件。

使用方式:在相关开发或审查场景中参照对应规则前缀(如 composition-、component-、reactive-、tailwind-、primevue-)逐项检查并落实。文中给出了 script setup 结构、组合式函数、带默认值的 props、类型化事件、defineModel 实现 v-model、模板引用类型、类型安全 provide/inject、错误边界组件、异步组件加载等示例代码,可按原样参考。

限制:具体安装命令、依赖版本、性能与效果数据暂未提供。