外掛的核心是install函式，第一個引數是Vue物件，第二個引數是options配置引數。當通過vue.use()呼叫外掛時，即執行install方法

通過mixins建立全域性外掛

以下封裝了一個數據驗證的外掛rules。通過在vue例項的$options中新增rules，實現對例項中data的監聽

const validatePlugin = {
   // 使用vue.use呼叫時執行
  install: function (vue) {
   // 向全域性mixin物件中新增
    vue.mixin({
   // 在created生命週期函式中
      created() {
   // 判斷options中是否存在rules屬性
        if (this.$options.hasOwnProperty(rules)) {
   // 拿到rules中的每一條規則(key，對應data中的資料)，遍歷
          Object.keys(this.$options.rule).forEach((key) => {
            const rule = this.$options.rules[key];
            // 監聽資料改變，進行驗證
            this.$watch(key, (newVal) => {
              const result = rule.validate(newVal);
              if(!result){
                console.log(rule.message)
              }
            });
          });
        }
      },
    });
  },
};

Vue.use(validatePlugin);
 

使用方法如下：

每當該例項中的foo屬性改變，就會觸發這個驗證機制。當foo小於等於1時，就會在控制檯輸出message

const vm = new Vue({
  data: { foo: 10 },
  rules: {
    foo: {
      validate: (value) => value > 1,
      message: "foo must be greater than one",
    },
  },
});

封裝控制元件

先與建立其他vue例項相同，構建控制元件需要實現的效果

再在js檔案中，實現install方法，並暴露為全域性物件

以下為封裝訊息彈框控制元件toast

import toast from './toast.vue'
var toastObj = {}
toastObj.install = function(vue){
    const toastConstructor = vue.extend(toast)
    const toast = new toastConstructor()
    toast.$mount(document.creatElement('div'))
    document.body.appendChild(toast.$el)
    vue.prototype.toast = toast
}
 

之後，可以在main.js檔案中，通過vue.use(toast)全域性使用toast控制元件；

也可以在任何vue例項中進行區域性使用。