前言

最近由于各种原因，已经有半年没有更新过博客了，接下来的时间会不定期的进行一些更新！ 言归正传，前面几篇文章已经大致介绍了 vue 的一些特性和注意事项，接下来我们就聊聊 vue 项目中经常用到的插件开发，及一些注意事项。

说明

在 vue 项目中，我们经常会使用插件为 vue 添加一些全局功能，这些功能并没有严格的限制，他们一般有下面几种情况：

1. 添加全局方法或者属性。
2. 添加全局资源：指令/过滤器/过渡等。
3. 通过全局混入来添加一些组件选项。
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。

关于混入、指令和过滤器我们在前面的文章中，已经有过一些说明，而 Vue.prototype 方式相信各位前端小伙伴都能明白，本文主要就开发一个简单的插件示例对插件开发进行一些简单的说明。

使用插件

在我们使用插件时，需要在 new Vue 之前调用 Vue.use() 方法对插件进行注册：

// 组件注册
Vue.use(MyPlugin);

// 可以在注册插件时传入一个可选的参数对象
Vue.use(MyPlugin2, {
    name: 'plugin',
    // ...
});

new Vue({
    // ...
})

这里需要说明的是，插件注册必须在 new Vue 之前进行，并且 Vue.use 会自动阻止多次注册同一个插件，即使调用了多次 Vue.use 注册了同一个插件，最终也只会注册一次！有些插件内部会在检测到可访问的 Vue 全局变量时，会自动在内部进行注册，但是在模块环境中，我们应该始终显式的调用 Vue.use 进行注册。

开发插件

首先，我们在开发插件时，都应该暴露一个 install 方法，以便于 Vue 进行安装。该方法的第一个参数是 Vue 构造器，第二个参数为可选的参数对象：

MyPlugin.install = function (Vue, options) {
    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
        // 逻辑...
    }

    // 2. 添加全局资源
    Vue.directive('my-directive', {
        bind (el, binding, vnode, oldVnode) {
        // 逻辑...
        }
        ...
    })

    // 3. 注入组件选项
    Vue.mixin({
        created: function () {
        // 逻辑...
        }
        ...
    })

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
        // 逻辑...
    }
}

示例

上面已经简单介绍了插件开发及使用，下面我们就实地开发一个简单的提示插件：

// 创建Toast类
class Toast {
    constructor() {
        this.option = {};
        this.html = document.createElement('div');
    }

    /**
     * Vue 安装方法
     * 
     * @param {Object} Vue Vue全局变量
     * @param {Object} option 配置参数
     */
    install(Vue, { time } = { time: 3000 }) {
        this.option.time = time;
        Vue.prototype.$alert = this;
    }

    /**
     * tips展示
     */
    _open() {
        document.body.appendChild(this.html);

        setTimeout(() => {
            this._close();
        }, this.option.time);
    }

    /**
     * tips关闭
     */
    _close() {
        document.body.removeChild(this.html);
    }

    /**
     * 成功提示
     */
    success(info) {
        this.html.innerHTML = info;
        this.html.className = 'success';
        this._open();
    }

    /**
     * 警告提示
     */
    warn(info) {
        this.html.innerHTML = info;
        this.html.className = 'warn';
        this._open();
    }

    /**
     * 错误提示
     */
    error(info) {
        this.html.innerHTML = info;
        this.html.className = 'error';
        this._open();
    }
}

export default new Toast;

上面是一个简单的 Toast 提示插件，代码很简单，跟我们正常开发js插件一样，只是需要对外暴露 install 方法，以便 Vue 进行注册安装。当然，这里只是一个简单的例子，还有很多其他的玩法：先开发一个 Toast 组件，然后用js来进行控制，开发成插件：

// 创建toast组件
const ToastComponent = Vue.extend({
    template: '<div v-if="isOpen" :class="className">{{info}}</div>',
    data() {
        return {
            info: '',
            isOpen: false,
            className: 'toast',
        };
    },
});

// 创建Toast类
class Toast {
    constructor() {
        this.option = {};
        this.toast = new ToastComponent;
    }

    /**
     * Vue 安装方法
     * 
     * @param {Object} Vue Vue全局变量
     * @param {Object} option 配置参数
     */
    install(Vue, { time } = { time: 3000 }) {
        this.option.time = time;
        Vue.prototype.$toast = this;
    }

    /**
     * tips展示
     */
    _open() {
        this.toast.isOpen = true;
        this.toast.$mount('#box');

        setTimeout(() => {
            this._close();
        }, this.option.time);
    }

    /**
     * tips关闭
     */
    _close() {
        this.toast.isOpen = false;
    }

    /**
     * 成功提示
     */
    success(info) {
        this.toast.info = info;
        this.toast.className = 'success';
        this._open();
    }

    /**
     * 警告提示
     */
    warn(info) {
        this.toast.info = info;
        this.toast.className = 'warn';
        this._open();
    }

    /**
     * 错误提示
     */
    error(info) {
        this.toast.info = info;
        this.toast.className = 'error';
        // eslint-disable-next-line no-underscore-dangle
        this._open();
    }
}

export default new Toast;

上面的例子可以看到， Vue 组件实际上就是一个 Vue 实例，我们可以通过js来控制 Vue 实例上的数据来对组件进行修改和控制，这样在我们开发有比较复杂的模板插件时，可以直接使用该方式来进行插件开发，就不需要在js里面写一堆html代码和css代码了，只需关注数据及逻辑处理即可！其实，这种方式大家一看就能懂，只是在实际开发中，可能很多人都没有想到这种方法，在这里也算是给大家提供一种新思路！

最后

由于本人实力经验有限，在写作过程中，如有错误还望各位大侠能个帮忙指出，也希望各位大侠能够理解！

转载说明

本文允许全文转载，转载请注明来源： 平凡公子 - vue从入门到精通之插件开发