nuxtjs 插件 ​

什么是插件 ​

Nuxt.js 插件是在 Vue.js 应用初始化之前或之后自动执行的函数，用于扩展应用功能。它们在 Nuxt 应用生命周期中特定时刻被加载，允许您添加全局功能。

示意图：

应用启动 -> 插件执行 -> Vue应用初始化 -> 功能可用

插件类型 ​

Nuxt.js 支持两种主要插件类型：客户端插件和服务端插件。客户端插件仅在浏览器中运行，服务端插件在服务器端执行，还有一些插件可在两端运行。

示意图：

插件文件
├── 客户端插件 (*.client.js)
├── 服务端插件 (*.server.js)  
└── 通用插件 (*.js)

创建插件 ​

在 plugins 目录中创建 JavaScript 或 TypeScript 文件来定义插件。每个插件导出一个默认函数，接收 Nuxt 上下文作为参数，可以执行初始化逻辑或注入全局资源。

示例插件结构：

// plugins/my-plugin.js
export default defineNuxtPlugin((nuxtApp) => {
  // 插件逻辑
})

插件注册 ​

插件在 nuxt.config.js 文件中注册，可以控制加载顺序。Nuxt.js 会自动扫描 plugins 目录，但也可以通过配置手动指定插件及其顺序。

示意图：

nuxt.config.js -> plugins数组 -> 按顺序加载插件

功能注入 ​

插件通过 provide 方法向整个应用注入全局可用的函数、变量或服务。这些注入的内容可以在组件、页面和其他插件中使用。

注入示例：

export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg) => `Hello ${msg}!`
    }
  }
})

使用场景 ​

插件适用于多种场景，包括集成第三方库、添加全局组件、设置自定义指令、配置 HTTP 客户端或实现身份验证逻辑。

示意图：

使用场景：
- 添加UI库 -> 全局注册组件
- 配置axios -> 设置基础URL和拦截器
- 身份验证 -> 注入用户状态管理

生命周期 ​

插件在 Nuxt 应用启动过程中按注册顺序执行。客户端插件在浏览器中运行，服务端插件在服务器渲染时执行，通用插件在两端都会运行。

示意图：

应用启动过程：
服务端渲染 -> 服务端插件 -> 通用插件 -> HTML发送到客户端
客户端激活 -> 客户端插件 -> 通用插件 -> 应用完全交互