插件

插件（plugin）是一种可选的独立模块，它可以添加特定功能或特性，而无需修改主程序的代码。

Vue 中使用插件：

const app = createApp();
// 通过use方法来使用插件
app.use(router).use(pinia).use(ElementPlus).mount("#app");

Vue 中制作插件：

1. 一个插件可以是一个拥有 install 方法的对象：

   const myPlugin = {
     install(app, options) {
       // 配置此应用
     },
   };
   

2. 也可以直接是一个安装函数本身：

   const install = function (app, options) {};
   

   安装方法接收两个参数：

   1. app：应用实例

   2. options：额外选项，这是在使用插件时传入的额外信息

      app.use(myPlugin, {
        /* 可选的选项，会传递给 options */
      });
      

Vue 中插件带来的增强包括：

1. 通过 app.component 和 app.directive 注册一到多个全局组件或自定义指令
2. 通过 app.provide 使一个资源注入进整个应用
3. 向 app.config.globalProperties 中添加一些全局实例属性或方法
4. 一个可能上述三种都包含了的功能库 (例如 vue-router)

例如：自定义组件库时，install 方法所做的事情就是往当前应用注册所有的组件

import Button from "./Button.vue";
import Card from "./Card.vue";
import Alert from "./Alert.vue";

const components = [Button, Card, Alert];

const myPlugin = {
  install(app, options) {
    // 这里要做的事情，其实就是引入所有的自定义组件
    // 然后将其注册到当前的应用里面
    components.forEach((com) => {
      app.component(com.name, com);
    });
  },
};

export default myPlugin;

实战案例

在企业级应用开发中，经常需要一个 全局错误处理和日志记录插件，它能够帮助捕获和记录全局的错误信息，并提供一个集中化的日志记录机制。

我们的插件目标如下：

1. 捕获全局的 Vue 错误和未处理的 Promise 错误。
2. 将错误信息记录到控制台或发送到远程日志服务器。
3. 提供一个 Vue 组件用于显示最近的错误日志。

// src / plugins / ErrorLogger
import ErrorLogger from "./ErrorLogger.vue";

export default {
  install(app, options = {}) {
    // 1. 首先进行参数归一化

    // 设置一个默认的 options
    const defaultOptions = {
      logToConsole: true, // 是否把错误日志打印到控制台
      remotoLogging: false, // 是否把错误日志发送到服务器
      remoteUrl: "", // 远程日志服务器地址
    };

    // 合并用户传入的 options 和默认 options
    const config = { ...defaultOptions, ...options };

    // 2. 捕获两种类型的错误

    // （1）全局Vue错误
    app.config.errorHandler = (err, vm, info) => {
      logError(err, info);
    };

    // （2）捕获未处理的 Promise 错误
    window.addEventListener("unhandledrejection", (event) => {
      logError(event.reason, "unhandled promise rejection error!!!");
    });

    // 3. 统一交给错误处理函数处理

    // 错误处理函数
    function logError(error, info) {
      // 是否在控制台输出
      if (config.logToConsole) {
        // 并且console.error方法是改写过的，会把error信息记录到errors数组里面
        console.error(`[错误：${info}]`, error);
      }

      // 是否发送到远程服务器
      if (config.remotoLogging && config.remoteUrl) {
        fetch(config.remoteUrl, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            error: error.message, // 错误消息
            stack: error.stack, // 错误堆栈
            info, // 具体错误说明信息
            time: new Date().toISOString(), // 记录时间
          }),
        }).catch(console.error);
      }
    }

    // 4. 注册 ErrorLogger 组件
    app.component("ErrorLogger", ErrorLogger);
  },
};

// main.js
import { createApp } from "vue";
import App from "./App.vue";
// 引入自定义插件
import ErrorLogger from "./plugins/ErrorLogger/error-logger";

const app = createApp(App);

// 使用插件
app.use(ErrorLogger, {
  logToConsole: true,
  remotoLogging: true,
  remoteUrl: "http://localhost:3000/log",
});

app.mount("#app");