Vue插件如何构建并生成npm包-创新互联

这篇文章将为大家详细讲解有关Vue插件如何构建并生成npm包，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

vue的插件一般用来添加全局性的功能，具体可分为：

1. 添加全局方法或者属性；
2. 添加全局资源（指令、过滤器等）；
3. 通过全局 mixin 方法添加一些组件选项；
4. 在 Vue.prototype 上 添加 Vue 实例方法；
5. 创建一个库，提供自己的 API，同时提供上面提到的一个或多个功能；    

一般来说我们在项目中倾向于第五种方式，可以通过创建一个js文件包含我们需要添加的多种全局性功能，指令、过滤器、实例方法之类的。这样的一个插件的构建也不难，主要就是使用vue提供的install 方法，传入Vue构造器以及你所能用到的参数对象；添加对应的功能，export出去，在需要的地方引入并Vue.use()方法注册即可；具体使用参考vue官网插件部分——开发插件。

    这一次我的项目中需要添加‘反爬'功能，具体实现就是后端在检测到用户触发‘反爬'规则后返回指定错误码以及对应的验证页面，前端在全局请求中监测该错误码，在检测到错误码后通过插件加载验证页面让用户去验证，并将验证结果反馈给后端，在后端收到验证结果后移除验证页面。

     需求确定后，我们就知道这个插件需要做的事情就是创建一个vue组件实例=>加载后端返回的页面=>解析并执行其中的js文件=>注册验证成功的全局回调函数。具体操作如下：

const antiReptilian = {
 install(Vue, options) {
  Vue.$antirept = checkText => {
   if (!checkText) return;
   let wrapperTemp = Vue.extend({
    // 1、创建构造器，定义模板
    template:
     '
'
   });
   let antiObj = new wrapperTemp().$mount().$el; // 2、创建实例
   antiObj.innerHTML = checkText;
   initScripts(antiObj);//3、解析并顺序执行js
   let App = document.getElementById('app');
   let wrapper = document.getElementById('antiReptWrapper');
   if (wrapper) {
    return;
   }
   App.appendChild(antiObj); // 4、把创建的实例添加到App中
   window.checkSucceed = res => {
    // 5、验证通过后移除实例
    App.removeChild(antiObj);
    window.location.reload();
   };
  };
 }
};