layers
使用 layers/ 目录来组织和自动注册应用中的本地 layers。
通过 layers/ 目录,你可以在整个 Nuxt 应用中组织和共享可复用的代码、组件、组合式函数和配置。项目中任何位于 layers/ 目录中的 layer 都会被自动注册。
layers/ 目录的自动注册功能从 Nuxt v3.12.0+ 版本开始支持。Layers 非常适合使用 领域驱动设计 (DDD) 来组织大型代码库、创建可复用的 UI 库或主题、在项目之间共享配置预设,以及分离诸如管理面板或功能模块等关注点。
结构
layers/ 中的每个子目录都会被视为一个独立的 layer。一个 layer 可以包含与标准 Nuxt 应用相同的结构。
每个 layer 必须包含一个
nuxt.config.ts 文件才能被识别为有效的 layer,即使它是空的。目录结构
-| 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
自动别名
系统会自动创建指向每个 layer 的 srcDir 的命名 layer 别名。你可以使用 #layers/[name] 别名来访问 layer
// Access the base layer
import something from '#layers/base/path/to/file'
// Access the admin layer
import { useAdmin } from '#layers/admin/composables/useAdmin'
命名 layer 别名是在 Nuxt v3.16.0 中引入的。
Layer 内容
每个 layer 可以包含
nuxt.config.ts- Layer 专属配置,将与主配置进行合并app.config.ts- 响应式应用配置app/components/- Vue 组件(自动导入)app/composables/- Vue 组合式函数(自动导入)app/utils/- 工具函数(自动导入)app/pages/- 应用页面app/layouts/- 应用布局app/middleware/- 路由中间件app/plugins/- Nuxt 插件server/- 服务端路由、中间件和工具shared/- 应用与服务端之间共享的代码
优先级顺序
当多个 layer 定义了相同的资源(组件、组合式函数、页面等)时,优先级更高的 layer 胜出。Layer 按字母顺序排序,字母靠后的优先级更高(Z > A)。
要控制顺序,可以在目录名称前加上数字前缀:1.base/、2.features/、3.admin/。
或者,在 extends 中引用这些目录(例如 extends: ['~~/layers/admin', '~~/layers/base']),以便在不重命名的前提下通过 nuxt.config 对其排序,其中第一项具有最高优先级。