其他目录
content/ 目录
由 @nuxt/content 模块启用，用于创建基于 Markdown 的文件 CMS（内容管理系统）。
为什么需要 content/？
如果你要做一个博客或文档网站：
| 不用 content/ | 用 content/ |
|---|---|
每篇文章写一个 .vue 页面 | 每篇文章写一个 .md 文件 |
| 手动管理文章列表 | 自动生成 |
| 搜索功能自己实现 | 内置查询 API |
| 代码高亮自己配 | 内置 Shiki 高亮 |
| 文章和代码混在一起 | 内容和代码分离 |
安装模块：
bash
npm install @nuxt/contentts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/content'],
})目录结构：
text
content/
├── index.md → / (首页内容)
├── about.md → /about
├── blog/
│ ├── first-post.md → /blog/first-post
│ └── second-post.md → /blog/second-post
└── docs/
└── getting-started.md → /docs/getting-started在页面中查询内容：
vue
<script setup>
const { data } = await useAsyncData('home', () => queryContent('/').findOne())
</script>适合场景
博客、文档站、知识库——任何"大量文字内容 + 不想手写 HTML"的场景。
layers/ 目录
本地层目录，放入此目录的层会被自动注册。
什么是层（Layer）？
层可以理解为"可插拔的功能模块"。比如你有一个管理后台和一个博客，它们共享一些组件和工具，但各有自己的页面和 API。你可以把它们拆成两个层。
text
layers/
├── admin/
│ ├── nuxt.config.ts # 层配置（必须存在，Nuxt 靠它识别这是一个层）
│ ├── app/
│ │ ├── pages/ # 管理后台页面
│ │ └── components/ # 管理后台组件
│ └── server/
│ └── api/ # 管理后台 API
└── blog/
├── nuxt.config.ts
└── app/
└── pages/ # 博客页面层 vs 模块的区别
| 特性 | 层（Layer） | 模块（Module） |
|---|---|---|
| 代码位置 | 本地目录 | npm 包或本地目录 |
| 结构 | 完整的 Nuxt 项目结构 | 通过 Nuxt Kit 定义 |
| 典型用途 | 大项目拆分功能 | 功能增强（如 @pinia/nuxt） |
| 复用性 | 项目内 | 跨项目 |
什么时候用层？
当你的项目越来越大，想把功能拆分成独立模块时。比如一个 SaaS 产品，有用户端、管理端、文档站，可以各自作为一个层。
详细用法见 Layers（层）。
modules/ 目录
本地模块目录，用于存放项目专属模块。
模块 vs 层？
| 特性 | 模块 | 层 |
|---|---|---|
| 目的 | 通过代码修改 Nuxt 行为 | 提供额外的目录结构 |
| 代码形式 | TypeScript 函数 | 目录结构 |
| 典型用途 | 注册插件、添加构建配置 | 添加页面、组件、API |
text
modules/
└── my-module/
├── index.ts # 模块入口
└── runtime/
└── plugin.tsts
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'./modules/my-module', // 使用本地模块
],
})大多数情况下你不需要自己写模块
用社区现成的模块就行（如 @pinia/nuxt、@nuxt/image）。自己写模块是比较高级的用法。
.nuxt/ 目录
Nuxt 自动生成的目录，不要手动修改，不要提交到 Git：
text
.nuxt/
├── tsconfig.json # TypeScript 配置
├── types/ # 自动生成的类型
├── imports.d.ts # 自动导入声明
├── components.d.ts # 组件声明
└── ....nuxt/ 里都有什么？
| 文件 | 作用 | 什么时候用 |
|---|---|---|
tsconfig.json | TypeScript 项目配置 | 你不需要直接用 |
imports.d.ts | 自动导入的类型声明 | IDE 用来提供类型提示 |
components.d.ts | 组件的类型声明 | IDE 用来提供组件自动补全 |
types/ | 其他自动生成的类型 | 你不需要直接用 |
什么时候需要重新生成？
- 新增了组件/组合式函数但 IDE 不识别 → 运行
nuxt prepare - 克隆了别人的项目 →
npm install会自动运行（postinstall钩子） - 类型提示不正常 → 运行
nuxt prepare
.output/ 目录
构建输出目录，不要手动修改，不要提交到 Git：
text
.output/
├── public/ # 静态文件（HTML、CSS、JS、图片等）
├── server/ # 服务端代码
├── nitro.json # Nitro 配置
└── ....output/ 是你的"产品"
npm run build后生成- 部署时只需要这个目录的内容
- 不同部署模式生成的内容不同（Node.js、Serverless、静态站点等）
INFO
️ 不要手动修改 .output/ 中的文件 每次构建都会重新生成，你的修改会被覆盖
node_modules/ 目录
依赖安装目录，由包管理器管理。已默认在 .gitignore 中。
不需要了解这个目录的内容
它是 npm/pnpm 自动管理的。如果你遇到了"找不到模块"的错误，试试删除 node_modules 然后重新 npm install。
完整项目结构一览
text
my-nuxt-app/
│
│ ── 前端应用 ──────────────────────────────
├── app/ # 前端应用代码
│ ├── assets/ # 需要构建的资源
│ ├── components/ # 组件（自动导入）
│ ├── composables/ # 组合式函数（自动导入）
│ ├── layouts/ # 布局
│ ├── middleware/ # 路由中间件
│ ├── pages/ # 页面（自动生成路由）
│ ├── plugins/ # 插件
│ ├── utils/ # 工具函数（自动导入）
│ ├── app.vue # 根组件
│ ├── app.config.ts # 应用配置
│ └── error.vue # 错误页面
│
│ ── 后端服务 ──────────────────────────────
├── server/ # 服务端代码
│ ├── api/ # API 路由（/api 前缀）
│ ├── routes/ # 服务路由（无前缀）
│ ├── middleware/ # 服务中间件
│ ├── plugins/ # Nitro 插件
│ └── utils/ # 服务端工具函数（自动导入）
│
│ ── 共享代码 ──────────────────────────────
├── shared/ # 前后端共享代码
│ ├── types/ # 类型定义
│ ├── utils/ # 共享工具函数
│ └── constants.ts # 常量
│
│ ── 静态资源 ──────────────────────────────
├── public/ # 不经构建的静态资源
│
│ ── 扩展功能（按需） ──────────────────────
├── content/ # 内容文件（需 @nuxt/content 模块）
├── layers/ # 本地层
├── modules/ # 本地模块
│
│ ── 配置文件 ──────────────────────────────
├── .env # 环境变量（不提交 Git）
├── .gitignore
├── .nuxtignore # Nuxt 忽略文件
├── .nuxtrc # 简化配置
├── nuxt.config.ts # Nuxt 主配置
├── package.json # 项目信息和依赖
└── tsconfig.json # TypeScript 配置（通常只有 extends）
│
│ ── 自动生成（不提交 Git） ────────────────
├── .nuxt/ # Nuxt 自动生成的类型和配置
└── .output/ # 构建输出记忆技巧
- 你日常写的代码在
app/、server/、shared/三个目录 - 静态文件在
public/ - 配置在
nuxt.config.ts和.env - 其他都是自动生成或扩展功能，按需了解