编写 Nuxt 层
Nuxt 层是一个强大的功能，您可以使用它在单体仓库中，或者从 git 仓库或 npm 包中共享和重用部分 Nuxt 应用程序。层结构与标准 Nuxt 应用程序几乎相同，这使得它们易于编写和维护。
一个最小的 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 模板初始化一个层。这将创建一个基本结构，您可以在此基础上进行构建。在终端中执行此命令以开始使用
npx nuxi init --template layer nuxt-layer
请按照 README 中的说明进行后续步骤。
发布层
您可以使用远程源或 npm 包来发布和共享层。
Git 仓库
您可以使用 git 仓库来共享您的 Nuxt 层。一些例子
export default defineNuxtConfig({
extends: [
'github:username/repoName', // GitHub Remote Source
'github:username/repoName/base', // GitHub Remote Source within /base directory
'github:username/repoName#dev', // GitHub Remote Source from dev branch
'github:username/repoName#v1.0.0', // GitHub Remote Source from v1.0.0 tag
'gitlab:username/repoName', // GitLab Remote Source example
'bitbucket:username/repoName', // Bitbucket Remote Source example
]
})
GIGET_AUTH=<token> 以提供令牌。GIGET_GITHUB_URL=<url> 或 GIGET_GITLAB_URL=<url> 环境变量提供其 URL - 或者直接使用 在 nuxt.config 中的 auth 选项 进行配置。node_modules/.c12/layer_name/node_modules/)，您的包管理器无法访问该位置。install: true 来执行此操作。export default defineNuxtConfig({
extends: [
['github:username/repoName', { install: true }]
]
})
npm 包
您可以将 Nuxt 层发布为 npm 包，其中包含您要扩展的文件和依赖项。这使您可以与他人共享您的配置，在多个项目中使用它或私下使用它。
要从 npm 包扩展，您需要确保该模块已发布到 npm，并在用户的项目中作为 devDependency 安装。然后，您可以使用模块名称来扩展当前的 nuxt 配置
export default defineNuxtConfig({
extends: [
// Node Module with scope
'@scope/moduleName',
// or just the module name
'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) {
// You can check for a custom directory existence to extend for each layer
console.log('Custom extension for', layer.cwd, layer.config)
}
}
})
注意
_layers数组中较早的项目具有更高的优先级，并会覆盖后面的项目- 用户的项目是
_layers数组中的第一个项目
深入了解
配置加载和 extends 支持由 unjs/c12 处理，使用 unjs/defu 合并，并使用 unjs/giget 支持远程 git 来源。查看文档和源代码以了解更多信息。