SuperAPI AI 工具集

nuxt-modern

编程与开发

查看项目

更新于 10-28 17:11

技能介绍

用途

该技能面向 Nuxt/Vue 代码库,用于构建、审查、迁移和调试 Nuxt 4 应用,确保工作与当前版本对齐、类型安全并遵循框架原生写法。它是硬性 Nuxt 4-only 规范:强制 app/ 优先的源码布局、Nuxt 4 运行时默认值以及当前 Vue + TypeScript 模式,并拒绝 v3 时代的目录指导。

主要能力

  • 按需加载参考文档:
    • references/nuxt4-vue-patterns.md:架构、数据获取、路由、服务端与渲染指导。
    • references/typescript-modern.md:严格 TypeScript 默认值、类型模式与反模式检查。
    • references/ecosystem-preferences.md:现代包偏好、VueUse 优先启发式与替换矩阵。
    • references/nuxt3-to-nuxt4-deltas.md:迁移差异、codemod 映射与兼容性注意事项。
  • 核心流程:从 package.json、nuxt.config.*、锁文件与模块检测 Nuxt 版本与工具链,检查 srcDir、future.compatibilityVersion 与 app/ 目录是否存在;先确定渲染/运行时模式(SSR、SSG、混合、边缘/服务端)再写代码;使用 Composition API、<script setup lang="ts">、带类型的 composable 及服务端/客户端分离实现功能;优先 VueUse 与现代生态默认项;应用 Nuxt 4 运行时语义与迁移差异;拒绝旧的 Nuxt/Vue 模式并替换为当前等价物;编辑后校验类型、lint/构建输出与框架约束。
  • Nuxt 4 结构契约(硬性要求):应用源码放在 app/ 下(app/pages、app/components、app/layouts、app/middleware、app/plugins、app/app.vue、app/app.config.ts);运行时与项目根保持在仓库根(server/、shared/、public/、modules/、nuxt.config.ts);若显式配置 srcDir 则尊重该配置,但仍在其中应用 Nuxt 4 结构语义;将 future.compatibilityVersion 视为必需的检测信号,若存在且低于 4 则指出不匹配并给出 Nuxt 4 修正指导;不得在仓库根脚手架或推荐 v3 时代的 pages/、components/、layouts/、middleware/、plugins/。
  • 实现规则:使用 Nuxt 原生原语(useAsyncData、useFetch、Nitro 服务端路由、插件、运行时配置)而非自定义框架绕过;用 Composition API 与 composable 复用,新代码避免 Options API 除非明确要求;保持服务端路由、服务端 composable 与客户端 composable 的数据归属清晰;优先自动导入的 Nuxt 工具与 composable;启用严格 TypeScript 并避免应用代码中的 any;显式类型化运行时配置、API 响应、composable 契约与 emits/props;在稳定处优先推断类型,在边界添加显式导出/公开类型;使用提升正确性的现代 TS 特性(satisfies、const 断言、模板字面量类型、可辨识联合)。
  • 生态与包选择:在引入工具包处理响应式、浏览器 API、传感器、生命周期封装与异步辅助前优先使用 VueUse;选择类型支持强的 Nuxt 生态模块与活跃维护库;保持依赖最小化;Tailwind 深入指导交给 .agents/skills/tailwind-modern/SKILL.md,Nuxt 任务中仅保留集成级说明。
  • 旧模式护栏:不脚手架或推荐与 Nuxt 4 默认冲突的旧目录约定;新实现不引入 Vue 2 时代模式(mixins、filters、类风格组件装饰器);当 composable 或类型化 store 更清晰时不默认使用临时全局 store 或插件副作用;有 Nuxt 原生模式时不使用旧路由/数据获取惯用法;不在根级 pages/、components/、layouts/、middleware/、plugins/ 生成应用源文件。

使用方式

按核心工作流操作:先检测环境与工具链,确定渲染/运行时模式,再实现功能并应用结构与类型规则,最后校验。生成或审查代码时始终包含:环境检测说明(Nuxt 代际、Vue 版本族、TS 严格状态);Nuxt 4 结构合规说明(app/ 放置、根运行时目录、srcDir 处理、future.compatibilityVersion 状态);所选渲染/运行时策略及理由;添加依赖时的包选型理由(尤其 VueUse 与替代方案);已移除或避免的旧模式简表;执行的校验动作(类型检查/构建/测试/lint,视可用情况)。

适用场景

Nuxt 4 应用的开发、代码审查、从 Nuxt 3 迁移与问题调试,尤其是需要类型安全、框架原生写法与现代化包选型的 Vue/TypeScript 项目。

限制

该技能硬性仅支持 Nuxt 4,不适用于 Nuxt 3 根级目录布局的项目(除非作为迁移对象);不提供 Tailwind 的深入指导;文档中对具体命令、安装方式、收费与平台支持等信息暂未提供。