v3.17

图层

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

Nuxt 的核心特性之一是对层和扩展的支持。你可以扩展默认的 Nuxt 应用以重用组件、实用程序和配置。图层结构几乎与标准 Nuxt 应用相同，这使得它们易于编写和维护。

¥One of the core features of Nuxt is the layers and extending support. You can extend a default Nuxt application to reuse components, utils, and configuration. The layers structure is almost identical to a standard Nuxt application which makes them easy to author and maintain.

用例

¥Use Cases

  • 使用 nuxt.config 和 app.config 在项目之间共享可重用的配置预设
  • 使用 components/ 目录创建一个组件库
  • 使用 composables/ 和 utils/ 目录创建实用程序和可组合库
  • 创建 Nuxt 模块预设
  • 在项目之间共享标准设置
  • 创建 Nuxt 主题
  • 通过实现模块化架构来增强代码组织，并在大型项目中支持字段驱动设计 (DDD) 模式。

用法

¥Usage

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

¥By default, any layers within your project in the ~~/layers directory will be automatically registered as layers in your project.

Nuxt v3.12.0 中引入了图层自动注册功能。

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

¥In addition, named layer aliases to the srcDir of each of these layers will automatically be created. For example, you will be able to access the ~~/layers/test layer via #layers/test.

Nuxt v3.16.0 中引入了命名层别名。

此外，你可以通过将 extends 属性添加到 nuxt.config 文件来扩展层级。

¥In addition, you can extend from a layer by adding the extends property to your nuxt.config file.

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 仓库扩展，你还可以传递身份验证令牌：

¥You can also pass an authentication token if you are extending from a private GitHub repository:

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

Nuxt 使用 [unjs/c12](https://c12.unjs.io) 和 [unjs/giget](https://giget.unjs.io) 来扩展远程层。查看文档以获取更多信息和所有可用选项。

¥Nuxt uses [unjs/c12](https://c12.unjs.io) and [unjs/giget](https://giget.unjs.io) for extending remote layers. Check the documentation for more information and all available options.

:

:read-more{to="/docs/guide/going-further/layers"}

在图层创建指南中阅读更多关于图层的内容。

¥Read more about layers in the **Layer Author Guide**.

::

:video-accordion{title="Watch a video from Learn Vue about Nuxt Layers" videoId="lnFCM7c9f7I"}

:video-accordion{title="Watch a video from Alexander Lichter about Nuxt Layers" videoId="fr5yo3aVkfA"}

<a id="examples"></a>

## 示例

¥Examples

::card-group
  ::card{icon="i-simple-icons-github" title="Content Wind" to="https://github.com/Atinux/content-wind" target="_blank"}
  A lightweight Nuxt theme to build a Markdown driven website. Powered by Nuxt Content, TailwindCSS and Iconify.
  ::
::