← ClaudeAtlas

fec-nuxt-project-standardlisted

用于创建或审查 Nuxt 3 项目、文件路由、pages、layouts、SSR/SSG/SPA 行为、Nuxt 数据获取、route middleware、plugins、modules、server routes 或 Nuxt 特定 Vue 3 约定。通用 Vue 组件架构另按项目 Vue 约定处理;中文触发词包括 Nuxt、Nuxt 3。
bovinphang/frontend-craft · ★ 15 · Web & Frontend · score 80
Install: claude install-skill bovinphang/frontend-craft
# Nuxt 3 项目规范 适用于使用 Nuxt 3 + Vue 3 + TypeScript 的仓库。 ## 用途 规范 Nuxt 3 项目中 SSR/SSG 渲染模式、组合式 API、自动导入、数据获取、路由中间件和模块插件的工程实践,确保约定式开发和类型安全。 ## 流程 1. 先识别目标属于 Nuxt pages/layouts、渲染模式、数据获取、route middleware、plugin/module 还是 server route。 2. 明确 SSR / SSG / SPA 选择,避免服务端可执行代码依赖 `window` 或 `document`。 3. 数据获取优先使用 Nuxt 的 `useFetch` / `useAsyncData`,并检查水合一致性。 4. 路由鉴权、redirect 和权限问题与路由保护 workflow 对齐。 5. 通用 Vue 组件架构问题分流到 Vue 项目 workflow。 ## 项目结构 ``` ├── app.vue # 根组件 ├── nuxt.config.ts # Nuxt 配置 │ ├── pages/ # 基于文件的路由 │ ├── index.vue # / │ ├── login.vue # /login │ ├── dashboard/ │ │ ├── index.vue # /dashboard │ │ └── users/ │ │ ├── index.vue # /dashboard/users │ │ └── [id].vue # /dashboard/users/:id │ └── [...slug].vue # 捕获所有 │ ├── layouts/ # 布局 │ ├── default.vue │ └── auth.vue │ ├── components/ # 自动导入组件 │ ├── Button/ │ │ └── Button.vue │ └── AppHeader.vue │ ├── composables/ # 组合式函数(自动导入) │ ├── useAuth.ts │ └── useFetch.ts │ ├── server/ # 服务端 API │ ├── api/ # API 路由 │ │ └── users/ │ │ └── index.get.ts │ ├── middleware/ # 服务端中间件 │ └── utils/ # 服务端工具 │ ├── plugins/ # 插件 │ └── i18n.client.ts │ ├── middleware/ # 路由中间件 │ └── auth.ts │ ├── public/ # 静态资源