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 相关文章推荐
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
详解Document.Cookie
Dec 25 Javascript
javascript回到顶部特效
Jul 30 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
理解javascript async的用法
Aug 22 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
laravel安装和配置教程
2014/10/29 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
理解JavaScript的prototype属性
2012/02/11 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python获取糗百图片代码实例
2013/12/18 Python
利用python实现数据分析
2017/01/11 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
pandas 空数据处理方法详解
2019/11/02 Python
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
机关财务管理制度
2014/01/17 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
培训专员岗位职责
2014/02/26 职场文书
司机岗位职责说明书
2014/07/29 职场文书
公司宣传语大全
2015/07/13 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS