Vue实现Layui的集成

前言

在写公司项目时，遇到了集成layim实如今线客服的一个需求，通过个人一番折腾后，终于将layui集成了进来，接下来就跟你们分享下个人解决方案，欢迎各位感兴趣的开发者阅读本文😁javascript

获取layim

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

商用项目的话仍是建议你们获取正版受权，毕竟做者也不容易。html

在项目中安装layui-src依赖

yarn add layui-src | npm install layui-src

安装成功vue

在 node_modules下找到 layui-src下的 build文件夹复制到项目的public目录下
为了项目结构清晰，咱们将build文件夹重命名为layim

集成并使用layim

在vue项目中集成并使用layui我心里是拒绝的，由于vue和layui彻底是两个东西，两个框架底层设计理念彻底不一样，奈何公司须要layim这个东西，layim又依赖于layui，毕竟公司安排的最大嘛，我就只能从了公司🤪java

下述操做适用于vue cli3.0搭建的项目，cli版本高于3.0是没有任何问题，小于3.0就会有问题了，望你们悉知。node

打开项目的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，那么这一步能够省略，若是配置了请按照个人下述操做进行配置，不然项目会报错没法启动。jquery

打开项目根目录的.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官方提供的文档进行项目开发了。web

因为layui是直接dom操做的，依赖于jquery，vue是数据驱动dom，因此若是不是很必要的话，不建议在vue中即成layui，由于后续使用过程当中会有不少兼容性问题发生，有不少坑要填的。npm

写在最后

公众号没法外链，若是文中有连接，可点击下方阅读原文查看😊

本文分享自微信公众号 - 神奇的程序员k（MagicalProgrammer）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。