Vue实现Layui的集成方法步骤


Posted in Javascript onApril 10, 2020

前言

在写公司项目时,遇到了集成layim实现在线客服的一个需求,经过我的一番折腾后,终于将layui集成了进来,接下来就跟大家分享下我的解决方案,欢迎各位感兴趣的开发者阅读本文:grin:

获取layim

layui官方提供了npm的安装方法,我司使用的是layui正版授权的layim,今天在折腾时发现,从npm仓库获取layui,里面自带了layim,大家可以去白嫖一波,不过大家需要注意版权问题(如下图所示,layui官网进行了声明)。

商用项目的话还是建议大家获取正版授权,毕竟作者也不容易。

Vue实现Layui的集成方法步骤 

在项目中安装layui-src依赖

yarn add layui-src | npm install layui-src

安装成功

Vue实现Layui的集成方法步骤 

node_modules 下找到 layui-src 下的 build 文件夹复制到项目的public目录下

Vue实现Layui的集成方法步骤 

为了项目结构清晰,我们将build文件夹重命名为layim

Vue实现Layui的集成方法步骤 

集成并使用layim

在vue项目中集成并使用layui我内心是拒绝的,因为vue和layui完全是两个东西,两个框架底层设计理念完全不同,奈何公司需要layim这个东西,layim又依赖于layui,毕竟公司安排的最大嘛,我就只能从了公司

下述操作适用于vue cli3.0搭建的项目,cli版本高于3.0是没有任何问题,小于3.0就会有问题了,望大家悉知。

打开项目的index.html文件( public/index.html ),在head中添加如下代码

<!--引入layim-->
 <link rel="stylesheet" href="<%= BASE_URL %>/layim/css/layui.css">
 <script type="text/javascript" src="<%= BASE_URL %>/layim/layui.js"></script>

关闭eslint对layui的校验

如果你的项目没有配置eslint,那么这一步可以省略,如果配置了请按照我的下述操作进行配置,否则项目会报错无法启动。

打开项目根目录的.eslintrc.js文件,在module.exports添加如下代码

globals: {
 layui: true
 },

在组件中测试是否成功

console.log("layui集成成功");
 console.log(layui);
 layui.use("layim", layim => {
  console.log("layim集成成功");
  console.log(layim);
 });

启动项目,查看控制台打印结果

Vue实现Layui的集成方法步骤

我们发现layui和layim对象都已经有了数据,接下来就可以根据layui官方提供的文档进行项目开发了。

由于layui是直接dom操作的,依赖于jquery,vue是数据驱动dom,所以如果不是很必要的话,不建议在vue中即成layui,因为后续使用过程中会有很多兼容性问题发生,有很多坑要填的。

到此这篇关于Vue实现Layui的集成方法步骤的文章就介绍到这了,更多相关Vue集成Layui 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 #Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 #Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 #Javascript
JS实现省市县三级下拉联动
Apr 10 #Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 #Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 #Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 #Javascript
You might like
php str_replace的替换漏洞
2008/03/15 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
35个Python编程小技巧
2014/04/01 Python
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
司机职责范本
2014/03/08 职场文书
小摄影师教学反思
2014/04/27 职场文书
论文答谢词
2015/01/20 职场文书
刑事上诉状范文
2015/05/22 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL