fec-nuxt-project-standardlisted
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/ # 静态资源