如何构建一个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 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 Javascript
解决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
mysql建立外键
2006/11/25 PHP
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python中函数的用法实例教程
2014/09/08 Python
Python单例模式实例分析
2015/01/14 Python
教你学会使用Python正则表达式
2017/09/07 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
python实现同一局域网下传输图片
2020/03/20 Python
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
文明美德伴我成长演讲稿
2014/05/12 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书