如何构建一个Vue插件并生成npm包


Posted in Javascript onOctober 26, 2020

    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:
     '<div id="antiReptWrapper" style="z-index:9999 !important;"></div>'
   });
   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();
   };
  };
 }
};

    需要注意的是通过设置innerHTML 的方式加载验证页面会导致内部的js文件不执行;因此我们还必须将验证页面的的js文件提取出来再重新插入,并且还要保证内部多个js文件的执行顺序,具体代码如下:

//重新引入js文件
const initScripts = function(cont) {
 let oldScripts = cont.getElementsByTagName('script');
 let newScripts = [];
 for (let i = 0; i < oldScripts.length; i++) {//提取内部js文件
  let newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.innerHTML = oldScripts[i].innerHTML;
  if (oldScripts[i].src) {
   newScript.src = oldScripts[i].src;
  }
  newScripts.push(newScript);
 }
 while (oldScripts.length !== 0) {
  cont.removeChild(oldScripts[0]);//移除之前的js文件
 }
 for (let i = 0; i < newScripts.length; i++) {
  if (i == 0) {
   cont.appendChild(newScripts[i]);
  } else {//保证每个js文件按照之前的顺序执行
   newScripts[i - 1].onload = newScripts[
    i - 1
   ].onreadystatechange = function(event) {
    cont.appendChild(newScripts[i]);
   };
  }
 }
};

    到此为止这个简单的插件功能就完成了,在需要的地方引入、注册并调用Vue.$antirept()方法传入要加载的页面即可;

    将写好的插件生成npm包的方法也简单,分为以下几步:

1、前往npm官网注册一个npm账号=>【npm官网】;

2、将写好的插件生成一个简单的npm包:

  • 创建一个空文件夹,名称即为你的npm包的名称,注意名称不要与现有的npm包重复;
  • 切到该文件夹下,输入‘npm init'命令生成一个package.json文件,内部信息自定义;
  • 将写好的插件js文件拷到该文件夹下,重命名为index.js;
  • 在根目录下创建README.md文件,添加关于包的介绍信息(非必需);

3、发布创建好的包:

1. 若第一次发布包,执行‘ npm adduser'命令,输入前面注册好的npm账号,密码和邮箱;
2. 若不是第一次发布包,执行‘ npm login'命令进行登录,同样输入npm账号,密码和邮箱;
3.  登录成功以后,在刚才的文件夹下,执行‘npm publish'命令,即可发布该npm包;
4.  若要更新之前的包,只需要更改版本号,再执行‘npm publish'命令即可;

    至此一个简单的vue插件就生成了一个npm包了,以后使用就不需要加载js文件,可以直接通过npm的方式引入了,其它的小伙伴也可以一起愉快的玩耍了==>全剧终。

以上就是如何构建一个Vue插件并生成npm包的详细内容,更多关于vue生成npm包的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
详解JavaScript中return的用法
May 08 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
ES6 解构赋值的原理及运用
May 25 Javascript
webpack的移动端适配方案小结
Jul 25 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 #Javascript
vue实现前端列表多条件筛选
Oct 26 #Javascript
vue实现单一筛选、删除筛选条件
Oct 26 #Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 #Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 #Javascript
原生js实现贪吃蛇游戏
Oct 26 #Javascript
JavaScript实现五子棋小游戏
Oct 26 #Javascript
You might like
PHP 的 __FILE__ 常量
2007/01/15 PHP
php 获取mysql数据库信息代码
2009/03/12 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
php中异常处理方法小结
2015/01/09 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python循环语句中else的用法总结
2016/09/11 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python环境下安装opencv库的方法
2020/03/05 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
什么是TCP/IP
2014/07/27 面试题
优秀经理事迹材料
2014/02/01 职场文书
年终总结会议主持词
2014/03/17 职场文书
化学教育专业求职信
2014/07/08 职场文书
2015年技术员工作总结
2015/04/10 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书