Authoring Nuxt Layers
Nuxt 提供了一个强大的系统，允许你扩展默认的文件、配置等等。
Nuxt 层是一项强大的功能，可以在单体仓库内或从 git 仓库或 npm 包中共享和重用部分 Nuxt 应用程序。层的结构几乎与标准的 Nuxt 应用程序相同，因此它们易于编写和维护。
一个最简 Nuxt 层目录应包含一个 nuxt.config.ts 文件，以指示它是一个层。
export default defineNuxtConfig({})
此外，层目录中的某些其他文件将被 Nuxt 自动扫描并用于扩展此层的项目。
components/*- 扩展默认组件composables/*- 扩展默认可组合函数pages/*- 扩展默认页面server/*- 扩展默认服务器端点和中间件utils/*- 扩展默认工具函数nuxt.config.ts- 扩展默认 Nuxt 配置app.config.ts- 扩展默认应用程序配置
基本示例
export default defineNuxtConfig({
extends: [
'./base'
]
})
nuxt.config.ts 文件。起始模板
要开始使用，你可以使用 nuxt/starter/layer 模板 初始化一个层。这将创建一个基本结构，供你构建。在终端中执行以下命令开始：
npx nuxi init --template layer nuxt-layer
按照 README 中的说明进行后续步骤。
npx nuxi init --template gh:nuxt-themes/starter my-theme
发布层
你可以通过远程源或 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> 以提供一个令牌。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，可以是公开的或私有的。
提示
相对路径和别名
当在层的组件和可组合函数中使用别名（如 ~/ 和 @/）进行导入时，请注意别名是相对于用户项目路径解析的。作为解决方法，你可以使用相对路径进行导入。我们正在努力寻找更好的解决方案来处理层的命名别名。
当在层的 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('Custom extension for', layer.cwd, layer.config)
}
}
})
注意：
_layers数组中的早期项优先级较高，并覆盖后面的项- 用户的项目是
_layers数组中的第一项
深入了解
配置加载和扩展支持由 unjs/c12 处理，使用 unjs/defu 进行合并，并使用 unjs/giget 支持远程 git 源。查看文档和源代码以了解更多。