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 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
vue实现信息管理系统
May 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 选项及相关信息函数库
2006/12/04 PHP
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
python实现随机森林random forest的原理及方法
2017/12/21 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
JAVA代码查错题
2014/10/10 面试题
父亲的菜园教学反思
2014/02/13 职场文书
公司租房协议书
2014/10/14 职场文书
2016年十一促销广告语
2016/01/28 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
Java存储没有重复元素的数组
2022/04/29 Java/Android
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android