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

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

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

<note>

`layers/` 目录的自动注册功能在 Nuxt v3.12.0 及以上版本可用。

</note>

<tip icon="i-lucide-lightbulb">

层非常适合通过 **领域驱动设计 (DDD)** 来组织大型代码库，创建可复用的 **UI 库** 或 **主题**，在项目间共享 **配置预设**，以及分离关注点如 **管理面板** 或 **功能模块**。

</tip>

## 结构

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

<important>

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

</important>

```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 引入。

</note>

## 层内容

每个层可以包含：

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

## 优先级顺序

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

你可以用数字前缀控制顺序：`1.base/`, `2.features/`, `3.admin/`。

或者，在 [`extends`](https://nuxt.zhcndoc.com/docs/4.x/api/nuxt-config#extends) 中引用这些目录（例如 `extends: ['~~/layers/admin', '~~/layers/base']`），无需重命名即可在 `nuxt.config` 中对它们排序，其中第一项具有最高优先级。

<read-more to="https://nuxt.zhcndoc.com/docs/4.x/getting-started/layers#layer-priority">



</read-more>

<video-accordion title="观看 Learn Vue 关于 Nuxt 层的视频" video-id="lnFCM7c9f7I">



</video-accordion>


## Sitemap

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