在Vue项目中使用LayUI教程且解决laydate无效的问题

笔者在前段时间使用LayUI开发了一款编解码工具，现在项目中使用的是Vue，因此希望在新项目中整合该工具。因此就涉及到Vue项目如何使用LayUI的问题。

1，安装LayUI开发包

因为LayUI依赖jquery，因此需要同步安装。

npm i jquery
npm i layui-src

2，导入LayUI开发包

在需要整合工具的View组件里导入依赖。

import 'jquery/dist/jquery.min'
import 'layui-src/dist/css/layui.css'
import 'layui-src/dist/layui.js'

这种导入方式和直接在link标签里导入是一致的。

3，在挂载函数mounted中加载LayUI组件

当DOM元素被渲染完毕后，才能够使用，因此需要在mounted()函数里加载需要用到的LayUI的组件

 layui.use(['element', 'layer','form','laydate','table'], function(){your code area})

4，解决加载LayUI日期组件出现的错误

在编解码工具中使用了日期组件，但是点击无反应，且控制台报下述错误。

layui error hint: http://localhost:8080/js/css/modules/laydate/default/laydate.css?v=5.3.1 timeout

字面意义就是请求该路径超时，查询该路径是无效的，因此重新引入该模块的CSS文件即可，即将该文件import进来。

import 'layui-src/dist/css/modules/laydate/default/laydate.css'

这家伙又出现了 😃

5，整合后的界面

界面元素还是原来的样式，其实可以使用antd-vue进行进一步统一。