编写 Nuxt 层
Nuxt 提供了一个强大的系统，允许您扩展默认文件、配置等。
Nuxt 层是一个强大的功能，您可以在 monorepo 中，或从 git 仓库或 npm 包中共享和重用部分 Nuxt 应用程序。层的结构几乎与标准的 Nuxt 应用程序相同，这使得它们易于编写和维护。
另请参阅 getting-started > layers一个最小的 Nuxt 层目录应包含一个 nuxt.config.ts 文件，以指示它是一个层。
export default defineNuxtConfig({})
此外，层目录中的某些其他文件将被自动扫描，并由 Nuxt 用于扩展此层的项目。
components/*- 扩展默认组件composables/*- 扩展默认可组合项layouts/*- 扩展默认布局pages/*- 扩展默认页面plugins/*- 扩展默认插件server/*- 扩展默认服务器端点和中间件utils/*- 扩展默认工具nuxt.config.ts- 扩展默认 nuxt 配置app.config.ts- 扩展默认应用配置
基本示例
export default defineNuxtConfig({
extends: [
'./base'
]
})
启动模板
要开始使用，您可以使用 nuxt/starter/layer 模板 初始化一个层。这将创建一个您可以构建的基本结构。在终端中执行此命令以开始：
npm create nuxt -- --template layer nuxt-layer
按照 README 中的说明进行下一步。
发布层
您可以通过使用远程源或 npm 包来发布和共享层。
Git 仓库
您可以使用 git 仓库来共享您的 Nuxt 层。一些示例：
export default defineNuxtConfig({
extends: [
'github:username/repoName', // GitHub 远程源
'github:username/repoName/base', // GitHub 远程源中的 /base 目录
'github:username/repoName#dev', // GitHub dev 分支的远程源
'github:username/repoName#v1.0.0', // GitHub v1.0.0 标签的远程源
'gitlab:username/repoName', // GitLab 远程源示例
'bitbucket:username/repoName', // Bitbucket 远程源示例
]
})
如果您想扩展一个私有远程源，您需要添加环境变量 GIGET_AUTH=<token> 来提供令牌。
如果您想从自托管的 GitHub 或 GitLab 实例扩展远程源，您需要使用 GIGET_GITHUB_URL=<url> 或 GIGET_GITLAB_URL=<url> 环境变量提供其 URL - 或直接在您的 nuxt.config 中使用 the auth option 配置它。
请注意，如果您将远程源作为层扩展，您将无法访问其在 Nuxt 之外的依赖项。例如，如果远程层依赖于一个 eslint 插件，这将在您的 eslint 配置中不可用。这是因为这些依赖项将位于一个特殊位置 (node_modules/.c12/layer_name/node_modules/)，您的包管理器无法访问。
使用 git 远程源时，如果一个层有 npm 依赖项并且您希望安装它们，您可以通过在层选项中指定 install: true 来实现。
export default defineNuxtConfig({
extends: [
['github:username/repoName', { install: true }]
]
})
npm 包
您可以将 Nuxt 层发布为包含您想要扩展的文件和依赖项的 npm 包。这允许您与他人共享您的配置，在多个项目中使用它或私下使用它。
要从 npm 包扩展，您需要确保模块已发布到 npm 并作为 devDependency 安装在用户的项目中。然后您可以使用模块名称来扩展当前的 nuxt 配置：
export default defineNuxtConfig({
extends: [
// 带有作用域的 Node 模块
'@scope/moduleName',
// 或者仅仅是模块名称
'moduleName'
]
})
要将层目录发布为 npm 包，您需要确保 package.json 中的属性已正确填写。这将确保在发布包时包含文件。
{
"name": "my-theme",
"version": "1.0.0",
"type": "module",
"main": "./nuxt.config.ts",
"dependencies": {},
"devDependencies": {
"nuxt": "^3.0.0"
}
}
确保在层中导入的任何依赖项都明确添加到 dependencies 中。nuxt 依赖项以及任何仅用于在发布前测试层的内容，应保留在 devDependencies 字段中。
现在您可以继续将模块发布到 npm，无论是公开还是私下。
当将层作为私有 npm 包发布时，您需要确保登录，以便通过 npm 进行身份验证以下载节点模块。
提示
命名层别名
自动扫描的层（来自您的 ~~/layers 目录）会自动创建别名。例如，您可以通过 #layers/test 访问您的 ~~/layers/test 层。
如果您想为其他层创建命名层别名，可以在层的配置中指定一个名称。
export default defineNuxtConfig({
$meta: {
name: 'example',
},
})
这将生成一个指向您层的 #layers/example 别名。
相对路径和别名
在层组件和可组合项中使用全局别名（如 ~/ 和 @/）导入时，请注意这些别名是相对于用户项目路径解析的。作为一种解决方法，您可以使用相对路径来导入它们，或使用命名层别名。
此外，在层的 nuxt.config 文件中使用相对路径时，（嵌套的 extends 除外）它们是相对于用户项目而不是层解析的。作为一种解决方法，在 nuxt.config 中使用完整解析路径：
import { fileURLToPath } from 'url'
import { dirname, join } from 'path'
const currentDir = dirname(fileURLToPath(import.meta.url))
export default defineNuxtConfig({
css: [
join(currentDir, './assets/main.css')
]
})
Nuxt 模块的多层支持
您可以使用内部数组 nuxt.options._layers 来支持您的模块的自定义多层处理。
export default defineNuxtModule({
setup(_options, nuxt) {
for (const layer of nuxt.options._layers) {
// 您可以检查自定义目录的存在以扩展每个层
console.log('自定义扩展', layer.cwd, layer.config)
}
}
})
注意：
_layers数组中的较早项具有更高的优先级并覆盖较晚的项- 用户的项目是
_layers数组中的第一个项
更深入
配置加载和扩展支持由 unjs/c12 处理，使用 unjs/defu 合并，并使用 unjs/giget 支持远程 git 源。查看文档和源代码以了解更多信息。
另请参阅 github.com > nuxt > nuxt > issues > 13367