---
title: "layers"
description: "使用 layers/ 目录来组织和自动注册应用中的本地层。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/directory-structure/layers"
---
# layers

> 使用 layers/ 目录来组织和自动注册应用中的本地层。

`layers/` 目录允许你在 Nuxt 应用中组织和共享可复用的代码、组件、组合式函数和配置。项目中 `layers/` 目录下的任何层都会被自动注册。

::note
`layers/` 目录的自动注册功能自 Nuxt v3.12.0+ 起支持。
::

::tip{icon="i-lucide-lightbulb"}
Layers 非常适合利用**领域驱动设计 (DDD)** 来组织大型代码库，创建可复用的**UI 库**或**主题**，在多个项目间共享**配置预设**，以及分离关注点，比如**管理面板**或**功能模块**。
::

## 结构

`layers/` 目录下的每个子目录都被视为一个独立的层。每个层可以包含与标准 Nuxt 应用相同的结构。

::important
每个层**必须包含**一个 `nuxt.config.ts` 文件才能被识别为有效层，即使该文件为空。
::

```bash [目录结构]
-| layers/
---| base/
-----| nuxt.config.ts
-----| app/
-------| components/
---------| BaseButton.vue
-------| composables/
---------| useBase.ts
-----| server/
-------| api/
---------| hello.ts
---| admin/
-----| nuxt.config.ts
-----| app/
-------| pages/
---------| admin.vue
-------| layouts/
---------| admin.vue
```

## 自动别名

会自动为每个层的 `srcDir` 创建命名层别名。你可以通过 `#layers/[name]` 别名来访问层：

```ts
// 访问 base 层
import something from '#layers/base/path/to/file'

// 访问 admin 层
import { useAdmin } from '#layers/admin/composables/useAdmin'
```

::note
命名层别名于 Nuxt v3.16.0 引入。
::

## 层内容

每个层可以包含：

- [`nuxt.config.ts`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/nuxt-config) - 特定于层的配置，将与主配置合并
- [`app.config.ts`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/app-config) - 响应式应用配置
- [`components/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/components) - Vue 组件（自动导入）
- [`composables/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/composables) - Vue 组合式函数（自动导入）
- [`utils/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/utils) - 实用函数（自动导入）
- [`pages/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/pages) - 应用页面
- [`layouts/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/layouts) - 应用布局
- [`middleware/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/middleware) - 路由中间件
- [`plugins/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/plugins) - Nuxt 插件
- [`server/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/server) - 服务端路由、中间件和实用工具
- [`shared/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/shared) - 应用与服务端之间共享的代码

## 优先级顺序

当多个层定义了相同资源（组件、组合式函数、页面等）时，**优先级更高的层将生效**。层按字母顺序排序，字母越靠后优先级越高（Z > A）。

你可以通过在目录名前加数字前缀来控制顺序：`1.base/`、`2.features/`、`3.admin/`。

::read-more{to="https://nuxt.zhcndoc.com/docs/3.x/getting-started/layers#layer-priority"}
::

::video-accordion{title="观看 Learn Vue 关于 Nuxt Layers 的视频" videoId="lnFCM7c9f7I"}
::


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.