vue自定义插件

自定义插件的用法 a 插件通常会为 Vue 添加全局功能，一般是添加全局方法/全局指令/过滤器等 b Vue 插件有一个公开方法 install ，通过 install 方法给 Vue 添加全局功能 c 通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成。

//第一种：对象插件

export default{
    /**
     * 对象插件需要暴露一个install方法，
     * @param {*} Vue：Vue 构造器
     * @param {*} options：传入的参数，可选
     */
    install(Vue, options) {
        console.log('执行插件install函数', options)
        // 1. 添加全局资源
        Vue.directive('my-directive', {
            bind (el, binding, vnode, oldVnode) {
            // 逻辑...
            }
        })
          // 2. 注入组件选项
        Vue.mixin({
            created: function () {
            // 逻辑...
            }
        })
 
        // 3. 添加实例方法
        Vue.prototype.$myMethod = function (methodOptions) {
            console.log('插件添加的方法')
        }
    }
}

//第二种：函数插件（vue会将函数当成install函数来执行）

export default function(Vue, options) {
    console.log('执行插件install函数', options)
   // 1.`添加指令`
    Vue.directive('my-directive', {
        bind (el, binding, vnode, oldVnode) {
        // 逻辑...
        }
    })
        // 2. 注入组件选项
    Vue.mixin({
        created: function () {
        // 逻辑...
        }
    })

    // 3. 添加实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
        console.log('插件添加的方法')
    }

}