Vue实现Layui的集成方法步骤

所属分类: 网络编程 / JavaScript 阅读数: 1744
收藏 0 赞 0 分享

前言

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

获取layim

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

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

 

在项目中安装layui-src依赖

yarn add layui-src | npm install layui-src

安装成功

 

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

 

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

 

集成并使用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);
 });

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

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

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

更多精彩内容其他人还在看

微信小程序对接七牛云存储的方法

本篇文章主要介绍了小程序对接七牛云存储的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

jquery easyui如何实现格式化列

本篇文章主要介绍了jquery easyui如何实现格式化列 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

关于前后端json数据的发送与接收详解

这篇文章主要给大家介绍了关于前后端json数据发送与接收的相关资料,文中通过示例代码详细介绍了关于flask中的json数据接收和前端发送json数据等内容,需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

Angular.js中上传指令ng-upload的基本使用教程

这篇文章主要给大家介绍了关于Angular.js中上传指令ng-upload的基本使用方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
收藏 0 赞 0 分享

利用JavaScript如何查询某个值是否数组内

这篇文章主要给大家介绍了关于利用JavaScript如何查询某个值是否数组内的相关资料,文中通过示例代码分别介绍了实现该问题的一些解决方法是否可行,需要的朋友可以参考借鉴,下面跟着小编来一起学习学习吧。
收藏 0 赞 0 分享

webpack实现热加载自动刷新的方法

本文介绍了webpack实现热加载自动刷新的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue的Flux框架之Vuex状态管理器

本文内容主要参考官方教程,为了方便理解,用更加通俗的文字讲解Vuex,也原文内容做一些重点引用。希望会对你有所帮助。
收藏 0 赞 0 分享

Angular.js中$resource高大上的数据交互详解

这篇文章主要给大家介绍了关于Angular.js中$resource高大上的数据交互的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angular.js具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。
收藏 0 赞 0 分享

webpack配置sass模块的加载的方法

本篇文章主要介绍了webpack加载sass配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue框架中正确引入JS库的方法介绍

最近在学习使用vue框架,在使用中遇到了一个问题,查找相关资料终于找了正确的姿势,所以这篇文章主要给大家介绍了关于在Vue框架中正确引入JS库的方法,需要的朋友可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享
查看更多