Javascript is required
Nuxt-Layer

是什么

Nuxt Layers是在Nuxt 3中引入的一个功能,它允许以模块化的方式扩展和组织Nuxt应用程序。

您可以使用它在 monorepo 中或从 git 存储库或 npm 包中共享和重用部分 Nuxt 应用程序。层结构几乎与标准 Nuxt 应用程序相同,这使得它们易于创作和维护。

最小的 Nuxt 层目录应包含一个文件来指示它是一个层。nuxt.config.ts

export default defineNuxtConfig({})

特点

核心功能

  1. Nuxt Layers是一种机制,允许你扩展默认的Nuxt应用程序以重用组件、实用程序和配置
  2. Nuxt Layer的结构几乎与标准的Nuxt应用程序相同,使其易于编写和维护

用例

  1. 它们用于使用nuxt.config和app.config在项目之间共享可重用的配置预设
  2. 你可以创建组件库、实用程序和可组合的库

层扩展

可以通过向nuxt.config.ts文件添加extends属性来扩展层

为什么

Nuxt 具有运行时上下文和构建时上下文。我们可以使用 ==Nuxt 插件==来更改和扩展 Nuxt 的运行时行为。我们可以使用 ==Nuxt 模块==来更改和扩展 Nuxt 的构建时行为。

Module vs Layers

编写 Nuxt 模块有一个陡峭的学习曲线。编写 Nuxt 模块需要您了解@nuxt/kit它提供的所有方法、它们的签名、如何以及何时使用它们等。编写 Nuxt 层时感觉非常像编写标准 Nuxt 应用程序,因为这正是它的本质!

区别

Modules:

  1. 是扩展Nuxt核心的底层
  2. are mostly associated with integrations and bringing in external libraries inside Nuxt
  3. 扩展方式是 nuxt.config/modules
  4. 需要对@nuxt/kit有深入的了解才能编写Nuxt模块

Layers:

  • 高级写法
  • 扩展方式是 nuxt.config/extends
  • 没有任何与nuxt的目录结构不同的约定的目录名
  • 感觉就像编写标准的nuxt应用程序一样

扩展 Nuxt

应用的nuxt.config.ts

export default defineNuxtConfig({
  extends: [
    // monorepo or external NPM package as a layer
    '@scope/moduleName',
    // local layers
    '../layers/base'
  ],
  modules: []
})

只要nuxt.config其中有文件即可

一个layer可以是

  1. 本地目录,
  2. 在线代码仓库,例如Github、Gitlab、BitBucket等
  3. 在线发布的NPM包
  4. 可以在本地访问的monorepo 包,无需在线发布任何内容。

了解可分层部件

Nuxt 将自动扫描层目录中的某些其他文件并将其用于扩展该层的项目。

  1. components/* - 扩展默认组件
  2. composables/* - 扩展默认可组合项
  3. pages/* - 扩展默认页面
  4. server/* - 扩展默认服务器端点和中间件
  5. utils/* - 扩展默认实用程序
  6. nuxt.config.ts- 扩展默认的 nuxt 配置
  7. app.config.ts - 扩展默认应用程序配置

除了/composables, /components, /pages, /servernuxt.config 文件之外, 也可以包含 /layouts, /middelware, /public, /plugins app.vue & app.config 放到Nuxt Layers.

原理

Nuxt Layers 功能在后台使用来自

https://github.com/unjshttps://github.com/unjs/c12

https://github.com/unjs/defu

配置加载和扩展支持由unjs/c12处理,使用unjs/defu合并,并使用unjs/giget支持远程 git 源。

通过extends合并配置文件, 所以一个layer必须包含nuxt.config.ts

目录的根目录中必须有一个nuxt.config文件才能被视为可以扩展到另一个 Nuxt 应用程序的Nuxt Layer。

例子

创建layer

Nuxt 提供了一个nuxi命令来初始化具有基本结构的入门模板。

npx nuxi init --template layer nuxt-ui-layer

与 Nuxt Modules一样,您也需要一个 Nuxt 应用程序来测试您的layer。此nuxi命令将在您的图层中生成一个.playground项目。这个游乐场充当您的目标 Nuxt 应用程序,您可以在其中使用和自定义您的图层。所以请随意亲自尝试一下。检查组件,运行游乐场并尝试更新游乐场的name内部/.playground/app.config.ts以查看正在运行的图层。

发布

  1. 将layer 转换为 monorepo 包
  2. 发布层
  3. Nuxt 项目中添加 layer
    可以使用git仓库去导入
    // 项目中导入
    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
      ]
    })
    

    发布npm包
    // 项目中导入
    export default defineNuxtConfig({
      extends: [
        // Node Module with scope
        '@scope/moduleName',
        // or just the module name
        'moduleName'
      ]
    })
    

主项目通过导入layer npm包后可以看到已经注册响应的组件了。

总结

层会对我们构建 Nuxt 应用程序的方式产生重大影响。但是,当我们使用 Nuxt 3 构建大型应用程序时,如何考虑层。想象一下,如果这些层是实际 Nuxt 项目的一部分。然后我们可以将每一层分为以下类别之一:

分类

  1. 平台层:抽象 UI 库、主题、身份验证、数据提供程序甚至可重用的 Nuxt 布局。
  2. 功能特定层:让我们以电子商务应用程序为例。我们可以为每个功能设置一层,例如:
    PDP(产品详细信息页面),
    PLP(产品列表页面),
    查看,
    帐号等
  3. 应用程序层:层不限于特性或功能。他们可以将整个应用程序抽象到其中。例如,博客、登陆页面、营销活动应用程序。它们可以重复用于从基础层创建多变体网站。

博客

https://krutiepatel.com/blog/nuxt-layers-unwrapped/#monorepo-packages-as-layers

示例仓库

https://github.com/Krutie/nuxt-layers-playground