如何构建一个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 new 需不需要继续使用
Jul 02 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 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
php 分库分表hash算法
2009/11/12 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
浅谈Python中copy()方法的使用
2015/05/21 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
django批量导入xml数据
2016/10/16 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
对python中的高效迭代器函数详解
2018/10/18 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python读写文件基础知识点
2019/06/10 Python
python解析xml简单示例
2019/06/21 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
python2 对excel表格操作完整示例
2020/02/23 Python
python利用opencv保存、播放视频
2020/11/02 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers