Vue插件是怎样开发的?

1.插件的分类

1.添加全局方法或属性，如 vue-element
2.添加全局资源: 指令/过滤器/过渡等，如 vue-touch
3.通过全局mixin方法添加一些组件选项，如 vuex
4.添加Vue实例方法，通过把它们添加到 Vue.prototype 上实现

vue插件的编写方法一般分为4类，主要注册和绑定机制如下:

export default {
    install(Vue, options) {
        Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性，如:  vue-custom-element            
            // 逻辑...        
        }
        Vue.directive('my-directive', {  // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch            
            bind (el, binding, vnode, oldVnode) {                
                // 逻辑...            
            }            
            ...        
        })        
        Vue.mixin({
            created: function () {  // 3. 通过全局 mixin方法添加一些组件选项，如: vuex                
                // 逻辑...            
            }            ...        
        })            
        Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现            
            // 逻辑...        
        }    
    } }

2.Vue插件编写方法

1.添加全局方法和属性

export default {    
    install(Vue, options) {
        Vue.$myName = 'jack';    
    }
}

在install方法中，我们直接在Vue实例上声明了$myName属性并进行了赋值，当该插件注册后只要存在Vue实例的地方你都可以获取到Vue.$myName的值，因为其直接绑定在了Vue实例上。

2.添加全局资源

export default {
    install(Vue, options) {
        Vue.directive('focus', {
            bind: function() {}, // 当绑定元素插入到 DOM 中。            
            inserted: function(el, binding, vnode, oldVnode) { 
                // 聚焦元素                
                el.focus();            
            },            
            update: function() {},            
            componentUpdated: function() {},            
            unbind: function() {}        
        });    
    },
}

添加全局资源包含了添加全局的指令／过滤器／过渡等，上方代码我们通过Vue.directive()添加了一个全局指令v-focus，其主要包含了5种方法，其中inserted代表当绑定元素插入到 DOM 中执行，而el.focus()代表聚焦绑定的元素，这样如果我们在一个input输入框上绑定该指令就会自动进行focus聚焦。

其他directive提供的方法及用途可以参考：vue自定义指令

3.添加全局 mixin方法

export default {    
    install(Vue, options) {        
        Vue.mixin({            
            methods: {                
                greetingFn() {                    
                    console.log('greeting');                
                }            
            }        
        });    
    },
}

mixin代表混合的意思，我们可以全局注册一个混合，其会影响注册之后创建的每个 Vue 实例，上方代码注册后会在每个组件实例中添加greetingFn方法，在单文件组件中可以直接通过this.greetingFn()调用。当然如果实例中存在同名方法，则mixin方法中创建的会被覆盖，同时mixin对象中的钩子将在组件自身钩子之前调用。

4.添加实例方法

export default {    
    install(Vue, options) {        
        Vue.prototype.$myName = '劳卜';        
        Vue.prototype.showMyName = value => {            
            console.log(value);        
        };    
    },
}

添加实例方法是最常用的一种方法，其直接绑定在vue的原型链上，我们可以回想一下 JS 里的类的概念。实例方法可以在组件内部，通过this.$myMethod来调用。

3.实现Toast插件

实现效果如下：比如登录成功后提示登录成功。

在某些情况下，我们封装的内容可能不需要使用者对其内部代码结构进行了解，其只需要熟悉我们提供出来的相应方法和 api

即可，这需要我们更系统性的将公用部分逻辑封装成插件，来为项目添加全局功能，比如常见的 loading 功能、弹框功能等。

Vue 提供给了我们一个 install 方法来编写插件，使用该方法中的第一个 Vue 构造器参数可以为项目添加全局方法、资源、选项

等。比如我们可以给组件添加一个

简单的全局调用方法来实现插件的编写：Toast.vue
1.Toast.vue

>

** 2.toast.js**

/* toast.js */
import ToastComponent from '@/components/toast' // 引入组件
let $vm
export default {
    install(Vue, options) {
        // 判断实例是否存在
        if (!$vm) {
            const ToastPlugin = Vue.extend(ToastComponent); // 创建一个“扩展实例构造器”
            // 创建 $vm 实例
            $vm = new ToastPlugin({
                el: document.createElement('div')  // 声明挂载元素
            });
            document.body.appendChild($vm.$el); // 把 toast 组件的 DOM 添加到 body 里
        }
        $vm.show = false;
        //给 toast 设置自定义文案和时间
        let toast = (text, duration) => {
            $vm.isShow = true;
            $vm.text = text;
            $vm.duration = duration;
            //在指定 duration 之后让 toast 消失
            setTimeout(() => {
              $vm.isShow = false;
            }, $vm.duration);
        }

        // 判断 Vue.$toast 是否存在
        if (!Vue.$toast) {
            Vue.$toast = toast;
        }
        Vue.prototype.$toast = Vue.$toast; // 全局添加 $toast 事件
    }
}
```
以上我们新建一个toast.js文件，引入我们的Toast.vue组件，然后通过Vue.extend()方法创建了一个构造器ToastPlugin ，其次我们再通过new  ToastPlugin ()创建了$vm实例，并挂载到一个div元素上。最后我们需要通过document.body.appendChild($vm.$el)将其插入到DOM节点中。

当我们创建了$vm实例后，我们可以访问该实例的属性和方法.

最终我们通过Vue.mixin或者Vue.prototype.$toast来全局添加了$toast事件。我们可以直接在页面中使用

this.$toast()来显示加载。

**3.在main.js中引用**
````js
import Toast from '@/widgets/toast/toast.js'
Vue.use(Toast); // 注册 Toast

最后我们在需要调用它的地方直接传入配置项的使用即可，比如

this.$toast('Hello World', 2000);