前面我提到了一个开发中常见需求：能够复用之前项目中的配置、已存在的组件、工具方法等等。Nuxt3 提供的 layers 特性能使我们非常容易地创建和维护这样的项目基础结构。
本节将会包括如下内容：
- layers 的使用场景；
- layers 使用方法 ；
- layers 常见用例；
- 如何定制一个 layers。
# Layers 使用场景
以下情况下比较适合使用 layers：
- 共享可重用配置项；
- 使用 components 目录共享组件库；
- 使用 composables 和 utils 目录共享工具函数；
- 创建 Nuxt 主题；
- 创建模块预设；
- 共享标准初始化步骤。
# Layers 使用方法
我们可以在 nuxt.config.ts 中配置 extends 选项从而继承一个 layers 配置。
有三种配置 layers 方式：
- 相对地址：从本地继承；
- Npm 包名：从 npm 安装；
- Github URL：从 Github 下载。
就像下面这样配置，nuxt.config.ts：
dart
复制代码export default defineNuxtConfig({
extends: [
'../base', // 从本地继承
'@my-themes/awesome', // 从 npm 安装
'github:my-themes/awesome#v1', // 从 github 下载
]
})
# 范例：使用 docus 建设文档网站
社区有个用于文档建设的项目叫 docus，提供了 50 多个组件和设计系统便于创建文档类页面。docus 完全基于 layers 方式创建，因此可以快速在已存在的 Nuxt 项目中引入。
首先安装 docus：
sql
复制代码yarn add @nuxt-themes/docus
接下来只需要在项目中添加 extends 选项，nuxt.config.ts：
css
复制代码defineNuxtConfig({
extends: '@nuxt-themes/docus'
})
这就好了！下面在 content 目录创建一个页面试试，content/index.md：
yaml
复制代码---
title: "Get Started"
description: "Let's learn how to use my amazing module."
aside: true
bottom: true
toc: true
---
# Get Started
Let's learn how to use my amazing module.
go to [installed](/install) page.
## 使用组件
### alert 组件
::alert{type="info"}
Check out an **info** alert with `code`.
::
## 配置页面
### layout
效果如下：
# 定制一个 layers
下面我带大家定制一个 layers 结构，它基本上和一个 Nuxt 项目的结构是一致的，因此非常容易构建和维护。
# 基本范例
下面我们重构之前案例为如下结构：nuxt-docus 是之前的 docus 项目， base 基于 layers 结构存放公用资源，nuxt-app 使用 base 中的资源。
csharp
复制代码base/
nuxt-app/
nuxt-docus/
base 中至少应该存放一个 nuxt.config.ts 文件，存放一些通用配置，这指明当前目录是一个 layers 结构:
php
复制代码export default defineNuxtConfig({
app: {
head: {
title: 'Extending configs by layers',
meta: [
{ name: 'description', content: 'I am using the extends feature in nuxt3!' }
],
}
}
})
同时我们再创建一个公用组件 BaseButton.vue:
xml
复制代码 <template>
<button
class="text-white px-4 py-2 flex-1 flex items-center justify-center shadow-lg rounded bg-sky-500 hover:bg-sky-600"
>
<slot>按钮</slot>
</button>
</template>
准备就绪，我们在 nuxt-app 中配置该继承 base：
php
复制代码// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss'
],
extends: [
'../base'
]
})
现在 app.vue 中可以直接使用 BaseButton：
xml
复制代码<BaseButton></BaseButton>
# 从模版项目开始定制 layers
Nuxi 有个命令可以初始化一个 layer 结构让我们快速开始：
arduino
复制代码npx nuxi init --template layer nuxt-layer
# 总结
layers 相关知识就跟小伙伴们介绍到这里了，可以看到利用层特性很容易复用已存在的项目中的共享资源，让我们项目可维护性大增。例如我们有一个大项目，可以做成一个 monorepo 项目，提取通用部分到 layers 中共享，其他项目按模块拆分，这样项目整体就会变得非常清爽易维护。
