layui + vue-cli遇到的问题

最近在使用layui+vue,碰到了挺多问题,总结一下

 

1.模块的加载路径问题

刚开始的时候我在main.js里只引了这两句

但使用layui.use('form', callback)将时就会报模块没有加再进来的错,很奇怪,

然后解决办法就是根据缺失的模块,对应的引入,比如form,再加这么一句

import '../node_modules/layui-src/src/lay/modules/form'

 

但组件一用多就会出现下面的情况

layui + vue-cli遇到的问题_第1张图片

这样很麻烦,还要一个个引入,源码中应该做好了相关依赖的操作的,可能是哪里出了问题

 

layui + vue-cli遇到的问题_第2张图片

这是layui.js里的一部分代码,可看到模块加载的路径好像不太多,我的模块都在/node_modules/layui-src/src/lay/modules 目录下,而它加载的是/lay/modules,所以解决办法一: 这种办法比较蠢,也是我用的,直接把相关包放到public目录下,方面localhost:8080时会自动在这个目录下找。应该还有其他办法,不过现在学艺不精只能先这样做

layui + vue-cli遇到的问题_第3张图片

 

 

因为layui.js有这么一句

layui + vue-cli遇到的问题_第4张图片

所以我就在原型上挂载了一个layui,

Vue.prototype.layui = window.layui

这样每个vue实例都能访问到new Layui()这个实例了

2.vue-router跳转后 layui里的select会消失

忘了刚开始是怎么做的了。。。反正改成下面这样就ok了

this.layui.use('form', ()=> {
  let form = this.layui.form;
  form.on('select(shzt)', (data)=> {
  });
  form.render()

3.关于laydate使用

this.layui.use('laydate', () => {
  let laydate = this.layui.laydate
  console.log(laydate)
  laydate.render({
    elem: '#test1',
    done: function(value, date, endDate){
  }
})

这里要传入done作为回调

你可能感兴趣的:(Javascript,vue,layui)