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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
jquery实现页面加载效果
Feb 21 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
JS闭包用法实例分析
Mar 27 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
详解vue 图片上传功能
Apr 30 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比你想象的好得多
2014/11/27 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
Pycharm Git 设置方法
2020/09/15 Python
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
见习期自我鉴定
2014/01/31 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
怎样写离婚协议书
2015/01/26 职场文书
房屋认购协议书
2015/01/29 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
JavaScript实现简单计时器
2021/06/22 Javascript
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript