[Nuxt 3] (十一) 传送 ＆ 模块

“你这里的人，在一座花园里就种了五千株玫瑰花，却没能从中找到自己想找的东西。” ———— 《小王子》

传送

Vue 3 内置了 <Teleport> 组件 允许组件内容渲染到Vue 外部的任何DOM上.

<teleport> 的 to 属性，接收一个CSS 选择器，或者一个真实的DOM节点。Nuxt 目前SSR部分支持吃 传送到 body，客户端要使用 <ClientOnly> 包裹后支持渲染到其他目标上。

示例: body teleport

<template>
  <button @click="open = true">
    Open Modal
  </button>
  <Teleport to="body">
    <div v-if="open" class="modal">
      <p>Hello from the modal!</p>
      <button @click="open = false">
        Close
      </button>
    </div>
  </Teleport>
</template>

示例: client-side teleport

  <ClientOnly>
    <Teleport to="#some-selector">
      <!-- content -->
    </Teleport>
  </ClientOnly>
</template>

模块

Nuxt 提供了一个模块系统来扩展框架核心以及简化集成方式。对于已经存在的模块，你需要要重新开发或维护脚手架，你可以在nuxt.config中添加你要使用的模块。

探索 Nuxt 模块

当使用Nuxt 开发生产级应用时，你可能会发现框架的核心功能还不够。Nuxt 可以通过配置选项和插件进行扩展，但在多个项目中维护这些配置会很繁琐，且重复。另一方面，开箱即用地支持每个项目的需求会让Nuxt 变得非常复杂难用。

这是Nuxt提供一个模块系统来扩展核心功能的一个原因。Nuxt 模块是异步函数，在执行nuxi dev 或 nuxi build时它们会顺序执行。它们可以替换模版，配置webpackde loaders ,添加CSS库，以及执行许多其他有用的任务。

最棒的是，Nuxt 模块可以通过npm包来管理，这使得它们可以跨项目重用并与社区共享，有助于创建一个高质量的附加组件生态系统。

扩展阅读^[1]

modules 属性

安装模块后，你可以把它们添加到 nuxt.config.ts 文件中的 modules 属性中。模块的开发者通常会提供额外的操作步骤和使用细节。

export default defineNuxtConfig({
  modules: [
    // Using package name (recommended usage)
    '@nuxtjs/example',

    // Load a local module
    './modules/example',

    // Add module with inline-options
    ['./modules/example', { token: '123' }]

    // Inline module definition
    async (inlineOptions, nuxt) => { }
  ]
})

Nuxt 模块现在只在构建时可用，Nuxt2中buildModules属性被modules替换了。

模块的开发

每个人都可以开发模块，在模块开发指引中阅读更多开发模块的知识。

参考资料

[1]

Nuxt 3 Compatible Modules: https://modules.nuxtjs.org/?version=3.x"