Vue实现Layui的集成方法步骤

前言

在写公司项目时，遇到了集成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，因为后续使用过程中会有很多兼容性问题发生，有很多坑要填的。

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

赞 (0)

相关推荐

  • 详解如何在vue项目中使用layui框架及采坑

    根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui 1.第一个坑:vue项目中使用npm安装引入时报错(目前并没有找到引入的合适的方式,知道的可以留言探讨) 在官网中我们可以看到他提到支持npm安装,但是当我们安装成功后,在main.js中引入时却报并不能找到该模块的错. 所以,我们先下载文件包,然后在html文件中用link和script标签的方式引入 2

  • 详解Vue.js和layui日期控件冲突问题解决办法

    事故还原: 今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现是vue的model绑定和layui冲突产生的,事实上是vue无法动态绑定layui中获取到的日期值,我们把那个v-model去掉就好,但是去掉的话就没办法动态绑定后台数据. 下面是html+vuejs+layui lyui通过use方法获取到input的ID实现日期选择,但是vue的model绑定和layui是有冲突的. 对于

  • vue+layui实现select动态加载后台数据的例子

    刚开始由于layui form渲染与vue渲染有时间差 有时会导致 select里面是空白的 后来就想办法 等vue数据渲染完 再渲染layui form 试过模块化导入layui form组件 然后等vue数据渲染完后手动进行渲染 这种方式有一个小问题 有时候会提示render方法未定义 可能是由于执行顺序原因 vue先执行了 最后把vue代码放到layui.use里面 问题解决 可能不是最好的实现方式 如有更好的实现方式欢迎指出 共同进步 页面代码 <div id="demo"

  • Vue实现Layui的集成方法步骤

    前言 在写公司项目时,遇到了集成layim实现在线客服的一个需求,经过我的一番折腾后,终于将layui集成了进来,接下来就跟大家分享下我的解决方案,欢迎各位感兴趣的开发者阅读本文:grin: 获取layim layui官方提供了npm的安装方法,我司使用的是layui正版授权的layim,今天在折腾时发现,从npm仓库获取layui,里面自带了layim,大家可以去白嫖一波,不过大家需要注意版权问题(如下图所示,layui官网进行了声明). 商用项目的话还是建议大家获取正版授权,毕竟作者也不容易

  • Node.js+Vue脚手架环境搭建的方法步骤

    Node.js的下载 node下载地址:https://nodejs.org/zh-cn/download/ 下载后安装即可.新版Node.js自带npm包管理器 # 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4 第一个Node.js程序,新建helloworld.js文件,内容如下 console.log("Hello World") console.log("第一个Node.js程序!") 进入终端

  • Vue生产环境调试的方法步骤

    Vue生产环境调试的方法步骤

    目录 前言 原理 方法步骤 代码 缺点 长期解决方法 总结 前言 vue 生产环境默认是无法启用vue devtools的,如果生产应用出了问题,就很难解决.用本文提供的方法就可以实现线上debug vue,也不需要在浏览器上打断点. 原理 先说下vue如何判断devtools是否可用的. vue devtools扩展组件会在window全局注入__VUE_DEVTOOLS_GLOBAL_HOOK__变量,Vue就是根据这个变量判断是否需要调试的. vue根实例初始化之前判断Vue.config

  • 优化Vue项目编译文件大小的方法步骤

    与其说是优化 Vue,不如说主要是在 webpack 打包的配置中做些文章,使得 Vue 编译后的文件尽可能的小.以下介绍自己在项目中进行优化的过程,其中的内容也许并不适合于每个项目,但整体思路是差不多的. 定位问题 要想进行优化,首先我们得清楚问题所在.即:是哪些代码/依赖包导致最后的编译文件过大? 这里,我们需要使用 webpack-bundle-analyzer 工具.修改 package.json 文件,添加: "analyze": "NODE_ENV=product

  • vue使用Font Awesome的方法步骤

    折腾前言 目前工作主要使用 vue.js 框架进行开发,自己又对 vue 不是那么了解,还是半桶的状态,所以得加紧步伐赶紧熟悉起来,这两天在使用脚手架 vue-cli 创建项目玩耍中,又一直对font-awesome锲而不舍,通过 github 了解到早有大牛搞出了 vue-awesome,因此就开始折腾了-- 废话不多说,开搞! 准备工作 这个是作者的 github 地址:飞机 为了演示完整步骤,用脚手架新建个项目 正在创建中- 趁此闲话几句 这种方式使用有个好处就是,你可以自己自定义任何图标

  • 使用django和vue进行数据交互的方法步骤

    一.前端请求的封装 1.将请求地址封装起来,以便日后修改,在src/assets/js目录下创建getPath.js文件 export default function getUrl(str) { let url = 'http://localhost:8000/' + str; return url; } 2.在同一个目录下创建axios.js文件 我的前端数据交互使用的模块使用的是axios import axios from 'axios' import getUrl from './ge

  • Vue Cli3 创建项目的方法步骤

    Vue Cli3 创建项目的方法步骤

    最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁.以下总结下应用过程中的一些经验. 1. 安装 npm install -g @vue/cli 2. 创建一个项目 vue create iview-admin # OR vue ui default (babel, eslint) 默认套餐,提供 babel 和 eslint 支持. Manually select features 自己去选择需要的功能,提供更多的特性选择.比如如果想要支持 Ty

  • Vant的安装和配合引入Vue.js项目里的方法步骤

    1.安装vant npm i vant -S:这是简写形式. npm install vant --save:这是完整写法. 如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装. npm install vant --save --registry=https://registry.npm.taobao.org 淘宝镜像,速度快,安装后查看package.json文件里看是否安装完成 2.1使用babel-plugin-import(推荐) babel-plugin-impo

  • 记一次用vue做的活动页的方法步骤

    前言 最近,公司的PR提了一个需求 自动获取七天新上传的并且审核通过的商品做成固定的链接的一个活动页面.当时想了一想就用vue做了,感觉效果还行,在这分享一下我是如何做的 希望对大家有一点点帮助. 效果图 附上线上地址 在线预览:新品租赁页 1:页面的构建及优化 所谓的活动页 首先第一步肯定是把页面切出来,这里就是2*n页面 我这里用的就是grid布局(也可以用flex)我主要讲三个点: 1:关于图片的优化 由于后段传过来的图片大小不一样,我就对图片做了做了一下优化 .整个图片在填充盒子的同时保

  • jenkins自动构建发布vue项目的方法步骤

    jenkins自动构建发布vue项目的方法步骤

    简介 Jenkins是一个开源的.提供友好操作界面的持续集成(CI)工具,起源于Hudson(Hudson是商用的),主要用于持续.自动的构建/测试软件项目.监控外部任务的运行(这个比较抽象,暂且写上,不做解释).Jenkins用Java语言编写,可在Tomcat等流行的servlet容器中运行,也可独立运行.通常与版本管理工具(SCM).构建工具结合使用.常用的版本控制工具有SVN.GIT,构建工具有Maven.Ant.Gradle. jenkins安装 1.安装JDK yum install

随机推荐