Question

Nuxt 提供了一个强大的系统，允许您扩展默认文件、配置等。

Nuxt 层是一项强大的功能，您可以使用它在 monorepo 中或从 git 存储库或 npm 包中共享和重用部分 Nuxt 应用程序。 层结构几乎与标准 Nuxt 应用程序相同，这使得它们易于编写和维护。 阅读更多

一个最小的 Nuxt 层目录应该包含一个 nuxt.config.ts 文件来表明它是一个层。

base/nuxt.config.ts

export default defineNuxtConfig({})

此外，层目录中的某些其他文件将被 Nuxt 自动扫描并用于扩展该层的项目。

• components/* - 扩展默认组件
• composables/* - 扩展默认可组合项
• pages/* - 扩展默认页面
• server/* - 扩展默认服务器端点和中间件
• nuxt.config.ts - 扩展默认的 nuxt 配置
• app.config.ts - 扩展默认应用配置

Basic Example

nuxt.config.ts

export default defineNuxtConfig({
  extends: [
    './base'
  ]
})

app.vue

  <template>
    <BaseComponent/>
  </template>

base/nuxt.config.ts

  export default defineNuxtConfig({
    // 从基础 nuxt.config.ts 扩展！
    app: {
      head: {
        title: '扩展配置很有趣！',
        meta: [
          { name: 'description', content: '我正在使用 nuxt 3 中的扩展功能！' }
        ],
      }
    }
  })

base/components/BaseComponent.vue

  <template>
    <h1>扩展配置很有趣！</h1>
  </template>

入门模板

要开始，您可以使用 nuxt/starter/layer 模板 初始化层。 这将创建一个您可以构建的基本结构。 在终端中执行此命令以开始：

bash

npx nuxi init --template layer nuxt-layer

按照 README 说明进行后续步骤。

检查 nuxt-themes/starter 以获得更自以为是的创作 Nuxt 主题的入门。 它可以用以下方式初始化：

bash

npx nuxi init --template gh:nuxt-themes/starter my-theme

发布层

您可以使用远程源或 npm 包发布和共享图层。

Git 仓库

相对路径和别名

您可以使用内部数组nuxt.options._layers来支持模块的自定义多层处理。

Example:

modules/my-module.ts

export default defineNuxtModule({
  setup(_options, nuxt) {
    for (const layer of nuxt.options._layers) {
      // 您可以检查自定义目录是否存在以扩展每一层
      console.log('Custom extension for', layer.cwd, layer.config)
    }
  }
})

笔记：

• _layers 数组中较早的项目具有较高的优先级并覆盖较晚的项目
• 用户的项目是 _layers 数组中的第一项

深入

配置加载和扩展支持由 unjs/c12 处理，使用 unjs/defu 和远程 git 合并 使用 unjs/giget 支持源。 查看文档和源代码以了解更多信息。

我们正在努力为层结构带来更多改进。 请参考 nuxt/nuxt#13367。