VUE插件 --（来自官方文档）

插件

插件是自包含的代码，通常向 Vue 添加全局级功能。它可以是公开 install() 方法的 object（  { install:xxxx } ），也可以是 function 

1、编写插件

       每当这个  插件 被添加到应用程序中时，如果它是一个对象，就会调用对象中的 install 方法。如果它是一个 function，则函数本身将被调用。

两种情况调用的函数都会接受两个参数：Vue.creatApp生成的对象和自己填写的options；

差劲最好单独在一个文件中编写 暴露出一个对象； 

插件还允许我们使用 inject 为插件的用户提供功能或 attribute。

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.')
        .reduce((o, i) => { if (o) return o[i] }, options)
    }

    app.provide('i18n', options)

    app.directive('my-directive', {
      mounted (el, binding, vnode, oldVnode) {
        // some logic ...
      }
      ...
    })

    app.mixin({
      created() {
        // some logic ...
      }
      ...
    })
  }
}

2、使用插件

 

在使用 createApp() 初始化 Vue 应用程序后，你可以通过调用 use() 方法将插件添加到你的应用程序中。

use() 方法有两个参数。第一个是要安装的插件，在这种情况下为 i18nPlugin。

它还会自动阻止你多次使用同一插件，因此在同一插件上多次调用只会安装一次该插件。

第二个参数是可选的，并且取决于每个特定的插件。在演示 i18nPlugin 的情况下，它是带有转换后的字符串的对象。

import { createApp } from 'vue'
import Root from './App.vue'
import i18nPlugin from './plugins/i18n'

const app = createApp(Root)
const i18nStrings = {
  greetings: {
    hi: 'Hallo!'
  }
}

app.use(i18nPlugin, i18nStrings)
app.mount('#app')