Lzh on GitHub

扩展层

Nuxt 提供了一个强大的系统，允许您扩展默认文件、配置以及更多内容。

Nuxt 的核心功能之一是 layers 和扩展支持。您可以扩展默认的 Nuxt 应用程序来重用组件、utils 和配置。layers 的结构几乎与标准的 Nuxt 应用程序相同，这使得它们易于编写和维护。

使用场景

  • 使用 nuxt.config 和 app.config 在项目之间共享可重用的配置预设
  • 使用 components/ 目录创建组件库
  • 使用 composables/ 和 utils/ 目录创建工具和 composable 库
  • 创建 Nuxt 模块预设
  • 在项目之间共享标准设置
  • 创建 Nuxt 主题
  • 通过在大型项目中实现模块化架构并支持领域驱动设计 (DDD) 模式来增强代码组织
可扩展的目录：

Usage

默认情况下，您的项目中 ~~/layers 目录中的任何 layers 都将自动注册为项目中的 layers。

Layer 自动注册是在 Nuxt v3.12.0 中引入的。

此外，还将自动为每个 layer 的 srcDir 创建命名的 layer 别名。例如，您将能够通过 #layers/test 访问 ~~/layers/test layer。

命名的 layer 别名是在 Nuxt v3.16.0 中引入的。

此外，您可以通过将 extends 属性添加到您的 nuxt.config 文件中来扩展 layer。

nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    '../base',                     // Extend from a local layer
    '@my-themes/awesome',          // Extend from an installed npm package
    'github:my-themes/awesome#v1', // Extend from a git repository
  ]
})

如果您要从私有的 GitHub 仓库扩展，您还可以传递身份验证令牌：

nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    // per layer configuration
    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }]
  ]
})
您可以通过在 layer 源旁边的选项中指定别名来覆盖 layer 的别名。
nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    [
      'github:my-themes/awesome',
      { 
        meta: {
          name: 'my-awesome-theme',
        },
      },
    ],
  ]
})

Nuxt 使用 unjs/c12 和 unjs/giget 来扩展远程 layers。查看文档以获取更多信息和所有可用选项。

在 Layer 作者指南 中阅读更多关于 layers 的信息。

示例

Content Wind

一个轻量级的 Nuxt 主题，用于构建 Markdown 驱动的网站。由 Nuxt Content、TailwindCSS 和 Iconify 驱动。