Skip to content

layers

· 2 min

层的使用场景：

  • 需要在项目之间共享配置预设
  • 需要共享 components 下的组件
  • 需要共享 composables 下的组合式函数
  • 需要共享 utils 下的工具方法
  • 需要共享 Nuxt 主题
  • 需要共享公共页面的时候
  • …

一句话总结：需要共享或者说需要复用代码的时候。

定义层

一个层基本就是一个完整的 Nuxt 项目，所以直接新初始化一个项目即可。

Terminal window
npx nuxi@latest init <project-name>

使用层

  • 将层放置于项目根目录，但是需要进行一个配置

    export default defineNuxtConfig({
      // ....
      extends: './xxxx',
    })

  • 将层放置于 layers 目录下，如果在该目录下面，会有一套自动化的处理，自动帮你进行注册

优先级

自身项目的内容和层所提供的内容重复时，自身项目的优先级更高。

精简层

可以对无用的文件进行删减，这里仅保留需要共享的内容：

project/
├── layers/
│   ├── base-layer/
│   │   ├── components/
│   │   ├── composables/
│   │   ├── layouts/
│   │   ├── pages/
│   │   ├── utils/
│   │   └── nuxt.config.ts

发布层

如果一个层非常的通用，那么可以发布到 npm 上面，回头在项目中，通过 npm i xxx 的形式来安装这个层。

需要对层的 package.json 文件进行一些关键配置：

  • files 字段指定需要发布到 npm 的内容。
  • 确保 nuxt.config.ts 是模块的入口。

接下来使用 npm login 进行登陆，之后 npm publish 进行发布即可。

发布成功后，就可以在项目中通过 npm i xxxx-layer 的方式来安装这个层。除了安装以外，还需要在项目的配置文件中指定这个层：

export default defineNuxtConfig({
  // ...
  extends: 'xxxx-layer',
})

之后这个层就能够正常使用了。

-EOF-