介绍

插件是一个增加全局功能的工具代码，实际使用场景都是通过应用实例来全局性的增加功能。可以通过 app.component() 增加全局组件，app.directive() 增加指令，app.privide() 给应用增加全局资源，app.config.globalProperties 增加实例属性和方法。

插件是通过应用实例的 app.use() 方法来安装的。这个函数的第一个参数一般是含有 install 方法的对象或者是一个安装函数，一般使用一个新的文件进行导入。第二个参数直接传给安装函数的第二个参数，另外，安装函数的第一个参数是应用实例。

手写一个插件

下面编写一个国际化插件，一般是叫做 i18n，取自 internationalization 的第一个和最后一个字母，中间再加上18因为单词中间有18个字母。

<!-- index.html -->
<div id="app">{{$t('greetings.hello')}}</div>

<script type="module">
  import { createApp, h, defineAsyncComponent } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
  import plugin from "./i18n.js";

  const app = createApp({
    data() {
      return {
        name: "leon",
      };
    },
  });
  app.use(plugin, {
    greetings: {
      hello: "leon",
    },
  });
  app.mount("#app");
</script>

export default {
  install: (app, options) => {
    app.config.globalProperties.$t = (key) => {
      return key.split(".").reduce((o, c) => {
        if (o) return o[c];
      }, options);
    };
  },
};

通过本地服务器即可运行 install.html 代码，在浏览器页面即可看到翻译的结果。分析上面的源码即可看到，通过 createApp 创建了应用实例 app，使用 app.use 方法即可安装插件 i18n。i18n 实现的功能很简单，它给应用实例提供了 $t 方法，传入该方法的字符串可以作为查找 app.use 第二个参数对象的“路径”。

总结

从上面的分析可以看出，插件只是一个工具代码，仅仅包括了 app.use() 和 install 两个方法。要想实现具体的需求还需要借助其他方法，比如 app.component()，app.directive()，app.provide()，app.config.globalProperties()。

参考资料：cn.vuejs.org/

重学 Vue3 之插件

介绍

手写一个插件

总结