41 lines
951 B
Markdown
41 lines
951 B
Markdown
|
---
|
|||
|
|
name: frontend-web-layout
|
|||
|
|
description: Web 前台布局规范（Nuxt 4），布局文件组织与使用
|
|||
|
|
globs:
|
|||
|
|
- "frontend/web/app/layouts/**/*.vue"
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 布局文件
|
|||
|
|
|
|||
|
|
| 布局 | 文件 | 说明 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| default | `layouts/default.vue` | 默认布局（含 header/footer） |
|
|||
|
|
| blank | `layouts/blank.vue` | 空白布局 |
|
|||
|
|
| container | `layouts/container.vue` | 容器布局 |
|
|||
|
|
| member | `layouts/member.vue` | 会员中心布局 |
|
|||
|
|
|
|||
|
|
## 代码模板
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<Header />
|
|||
|
|
<slot />
|
|||
|
|
<Footer />
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 关键约定
|
|||
|
|
|
|||
|
|
- Nuxt 自动加载 `layouts/` 目录下的布局文件
|
|||
|
|
- 页面通过 `definePageMeta({ layout: 'name' })` 指定布局
|
|||
|
|
- 默认布局为 `default.vue`
|
|||
|
|
- 布局中可使用 `<slot />` 嵌入页面内容
|
|||
|
|
|
|||
|
|
## 检查清单
|
|||
|
|
|
|||
|
|
- [ ] 布局文件是否放在 layouts/ 目录
|
|||
|
|
- [ ] 页面是否指定了正确的布局
|
|||
|
|
- [ ] 布局中是否包含必要的公共元素
|