Nuxt 插件与模块的区别

模块和插件都可以用来扩展 Nuxt 的功能，但它们在以下几个方面存在差异：

• 模块的设计目的是模块化，以便在多个项目中复用。它们可以通过额外的配置和插件来扩展 Nuxt 核心功能。

• 模块是自包含的，意味着它们具备扩展应用功能所需的全部内容，而无需对应用本身进行修改。例如，一个模块可以定义某个特定功能，并同时提供一个插件定义，使该新功能在整个应用中全局可用。

• 模块在 Vue 实例和 Nuxt 上下文创建之前执行。因此，模块无法访问 Vue 实例或 Nuxt 上下文。不过，模块可以添加自定义配置，影响后续实例和上下文的创建方式。

• 模块仅在构建过程中有用，它们会向 Nuxt 构建过程添加自定义配置和功能。而插件会被导入到应用实例中，因此在服务端和客户端环境中都可用。

• 插件在 Vue 实例和 Nuxt 上下文创建之后执行，这使得插件能够向应用注入功能。

• 插件更专注于修改或扩展现有功能，例如添加全局组件、可复用函数或过滤器。

插件注册

位于 /plugins 目录子文件夹中或独立文件夹中的插件，可以通过在 Nuxt 配置文件中声明来添加到应用中。这通过配置数组中的 plugins 属性完成，该属性接收一个数组作为参数。

1export default defineNuxtConfig({
2  ...
3  plugins: ['~/plugins/buttons/submit.ts', '~/custom-plugins/placeholder.ts'],
4  ...
5})

示例

在以下示例中，我们将展示插件如何使组件和函数全局化，从而扩展应用的功能。

• 在 components 目录之外创建的组件：
  位于 components 目录之外的组件不会被 Nuxt 扫描，因此无法在应用中全局使用。可以通过插件解决此问题。下面的 SPA 小部件展示了实现方法。

  注意，nuxtApp.vueApp 包含 Vue 应用实例，可用于向应用添加额外的功能或组件。

• helper 函数插件：
  在以下示例中，要跨应用共享的函数被定义在 return 对象的 provide 属性中。该函数可通过全局可用的 useNuxtApp 组合式函数，在 custom-components/button.vue 组件中被调用。

总结

本课介绍了在 NuxtJS 中使用插件的方法，这些插件用于扩展 Nuxt 框架的功能。同时提供了示例，说明插件如何使组件和函数在 Nuxt 应用中全局可用。