SuperAPI AI 工具集

nuxt-code-editor

编程与开发

查看项目

更新于 10-16 14:55

技能介绍

Nuxt Code Editor 是一个面向 Nuxt 项目的代码编辑技能,主要用于遵循项目标准生成和修改 Vue 3、TypeScript 和 SCSS 代码。

用途 该技能围绕 Nuxt 项目的日常开发场景,帮助按既定规范产出与调整代码,覆盖前端组件、服务端接口以及类型与校验相关逻辑。

主要能力

  • Vue 3 Composition API:生成 <script setup lang="ts"> 组件。
  • PrimeVue 集成:根据 utils/ 或现有的 components/ 用法正确使用 PrimeVue 组件。
  • Better-Auth 集成:正确使用 authClient(前端)和 auth(服务端)进行身份验证和权限控制。
  • 类型安全:确保所有后端代码使用在 server/database/entities 或 types/ 中定义的 TypeORM 实体和 DTO。
  • Zod 校验:使用 Zod 进行 API 请求参数校验(参考 utils/schemas/)。
  • 增量编辑:优先修补(patch)而非重写整个文件,以保留上下文。

使用方式与规范要求

  • 路径与工作树意识:所有文件创建与修改操作必须在当前任务所属的工作树中执行;主功能开发应在 dev 或 fix 分支对应的目录进行。
  • 代码风格:遵守 ESLint 和 Prettier 配置;样式使用 SCSS,并适用 BEM 命名约定。
  • 组件标准:使用 defineProps、defineEmits 并配合 TypeScript 接口/类型。
  • 后端标准:server/api 处理程序使用 defineEventHandler 并返回标准化响应(参考 docs/standards/api.md);禁止使用 PATCH 方法,所有更新操作应使用 PUT 方法;列表类接口必须返回统一的分页格式:items(数据列表)、total(总条数)、page、limit、totalPages。
  • 国际化:所有 UI 字符串必须包裹在 $t() 中;Key 命名必须遵循开发规范要求的 snake_case(小写+下划线)命名(现有 kebab-case 字段除外)。
  • 文件:创建文件时确保位于正确的 Nuxt 目录(components、composables、server/api 等)。
  • 依赖约束:遵循 docs/standards/development.md 中的依赖关系约束,避免循环依赖。

使用示例

  • 输入“创建一个按钮组件”,动作是使用 PrimeVue Button 生成 components/base/AppButton.vue,并在 TS 接口中定义 props。
  • 输入“创建一个获取文章列表的 API”,动作是在 server/api/posts.get.ts 中使用 defineEventHandler 和 typeorm 的 Repository 获取数据。

适用场景与限制 该技能适用于遵循上述规范的 Nuxt 项目开发任务,尤其是组件生成、API 编写、类型定义与校验等。其能力与行为受项目内既定规范、目录结构及文档约束。关于收费、价格、平台支持范围与具体效果等信息,资料暂未提供。