@[toc]
最近在录 TienChin 我的项目，我的项目波及到了 Vue 中插件的定义，因而整了这么一篇文章，手把手教大家在 Vue3 中定义插件，这个技能把握了，就可以看懂 TienChin 前端代码了。
1. Vue 插件
在 Vue 中，一些简略的性能，咱们能够间接定义为全局办法，而后挂到 Vue 上就能应用了，例如在 vhr 中，咱们将网络申请办法进行封装，而后挂到了 Vue.prototype 上就能够了，相似上面这样：
import {postRequest} from "./utils/api";Vue.prototype.postRequest = postRequest;而后在应用的中央，就能够通过 this.postRequest 去应用了。
小伙伴们须要留神，这个在 Vue3 中有所变动，prototype 变为了 config.globalProperties，也就是在 Vue3 中再想要挂载全局办法，应该是 const app = createApp(App);app.config.globalProperties.useDict = useDict 这种模式了（具体我将在 TienChin 我的项目中和大家细聊）。这也算是一种插件定义形式，然而这种个别实用于一些工具办法，无奈定义一些比较复杂的插件，简单的插件还是得通过 Vue 中提供的插件定义形式来定义。
2. 自定义插件
2.1 根本用法
首先咱们新建一个目录 plugins 专门用来放咱们的插件，而后在这个目录中新建一个 index.js 文件用来开发插件，内容如下：
export default { install: (app, options) => { console.log("我的第一个插件") }};install 中的办法将会被主动执行。
接下来咱们就能够在 main.js 中引入咱们这个插件了：
const app = createApp(App);import plugin from './plugins'app.use(plugin);app.use 就示意引入插件，引入插件之后，插件中的 install 办法就会被主动执行。
app.use 办法接管两个参数，第一个参数就是咱们导入的插件 js 对象，第二个参数是可选的，大家看到插件定义时候的 install 办法有两个参数，第一个参数是 Vue 实例，这是主动传入的，第二个参数 options 则是咱们在 app.use 中，通过第二个参数传入进来的。当然下面这个例子中松哥没有传递第二个参数。
好了，如此配置之后，接下来启动我的项目，控制台就能够看到有日志打出了。
这样的插件未免过于简略，接下来咱们就给这个插件加点料。
2.2 退出组件
首先咱们定义一个新的组件，如下：
<template> <div> <h1><a href="http://www.javaboy.org">javaboy</a></h1> </div></template><script> export default { name: "MyBanner" }</script>而后咱们当初就能够在插件中将这个组件注册为一个全局组件了，如下：
import MyBanner from "@/plugins/components/MyBanner";export default { install: (app, options) => { console.log("我的第一个插件") app.component('my-banner', MyBanner); }};首先在插件中导入这个组件，而后通过 app 进行组件注册，注册实现后，咱们就能够在我的项目任意地位应用 my-banner 组件了，如下：
<template> <div> <my-banner></my-banner> </div></template>最终显示成果如下：
2.3 退出指令
咱们甚至还能够在插件中注册一个指令，如下：
import MyBanner from "@/plugins/components/MyBanner";export default { install: (app, options) => { console.log("我的第一个插件") app.component('my-banner', MyBanner); app.directive("font-size", (el, binding, vnode) => { var size = 16; switch (binding.arg) { case "small": size = 16; break; case "large": size = 32; break; default: size = 48; break; } el.style.fontSize = size + "px"; }); }};当初，咱们就能够在我的项目中随时随地去应用这个指令了，例如在咱们刚刚自定义的 my-banner 中应用这个指令：
<template> <div> <h1><a href="http://www.javaboy.org" v-font-size:small>javaboy</a></h1> </div></template><script> export default { name: "MyBanner" }</script>咱们甚至能够通过 options 将指令中字体的大小动静的传进来，如下：
import MyBanner from "@/plugins/components/MyBanner";export default { install: (app, options) => { console.log("我的第一个插件") app.component('my-banner', MyBanner); app.directive("font-size", (el, binding, vnode) => { var size = 16; switch (binding.arg) { case "small": size = options.small; break; case "large": size = options.large; break; default: size = options.defaut; break; } el.style.fontSize = size + "px"; }); }};options 是插件注册时候传入的一个 JSON 参数，small、large 以及 default 别离对应的字体多大，要看插件注册时传入的值：
const app = createApp(App);import plugin from './plugins'app.use(plugin, {small: 16, large: 32, default: 48});第二个参数，大家看，就是 options 参数的值。
当初大家想想咱们平时用 ElementUI 的时候，Vue.use 办法，传入 ElementUI，再传入一些其余参数，看了下面这个例子，ElementUI 引入到底是怎么个引入法当初大家就明确了吧。
2.4 provide & inject
在插件中，也能够通过 provide 来提供一个办法，在须要应用该办法的中央，通过 inject 注入办法，而后就能够应用了，如下：
import MyBanner from "@/plugins/components/MyBanner";export default { install: (app, options) => { console.log("我的第一个插件") app.component('my-banner', MyBanner); app.directive("font-size", (el, binding, vnode) => { var size = 16; switch (binding.arg) { case "small": size = options.small; break; case "large": size = options.large; break; default: size = options.defaut; break; } el.style.fontSize = size + "px"; }); const clickMe = () => { console.log("==========clickMe=========") } app.provide('clickMe', clickMe); }};在须要应用的中央，通过 inject 注入办法后就能够应用了，如下：
<template> <div> <h1><a href="http://www.javaboy.org" v-font-size:small>javaboy</a></h1> </div></template><script> import {inject} from "vue"; export default { name: "MyBanner", mounted() { const clickMe = inject('clickMe'); clickMe(); } }</script>3. 小结
整体上来说，通过这种形式来自定义插件，可能实现的内容比拟丰盛。如果只是想挂一个全局办法来用，那么其实是没有必要定义插件的。如果只是想挂载一个全局办法，在 Vue2 中能够依照如下形式应用：
Vue.prototype.postRequest = postRequest;在 Vue3 中则能够通过如下形式：
app.config.globalProperties.useDict = useDict