layers
使用 layers/ 目录在应用程序中组织和自动注册本地层。
layers/ 目录允许您在 Nuxt 应用程序中组织和共享可重用的代码、组件、组合式函数和配置。项目中的任何 layers/ 目录内的层都将自动注册。
layers/ 目录自动注册功能在 Nuxt v3.12.0+ 中可用。层非常适合使用领域驱动设计(DDD)组织大型代码库、创建可重用的 UI 库或主题、在项目之间共享配置预设,以及分离诸如管理面板或功能模块等关注点。
结构
layers/ 中的每个子目录都被视为一个单独的层。一个层可以包含与标准 Nuxt 应用程序相同的结构。
每个层必须有一个
nuxt.config.ts 文件才能被识别为有效的层,即使是空的。目录结构
|-| 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] 别名来访问层:
// 访问 base 层
import something from '#layers/base/path/to/file'
// 访问 admin 层
import { useAdmin } from '#layers/admin/composables/useAdmin'
命名层别名在 Nuxt v3.16.0 中引入。
层的内容
每个层可以包括:
nuxt.config.ts- 特定于层的配置,将与主配置合并app.config.ts- 响应式应用程序配置app/components/- Vue 组件(自动导入)app/composables/- Vue 组合式函数(自动导入)app/utils/- 工具函数(自动导入)app/pages/- 应用程序页面app/layouts/- 应用程序布局app/middleware/- 路由中间件app/plugins/- Nuxt 插件server/- 服务器路由、中间件和工具shared/- 应用程序和服务器之间共享的代码
优先级顺序
当多个层定义相同的资源(组件、组合式函数、页面等)时,优先级更高的层获胜。层按字母顺序排序,后面的字母优先级更高(Z > A)。
要控制顺序,请在目录名前添加数字:1.base/、2.features/、3.admin/。