前端 Vue-cli 里使用 layui

前言

老师在前天介绍了bulma框架，一个纯 css 的，概念上就和 bootstrap 差不多，当时的案例只引用了 css 文件，而我发现 css 文件无法显示 icon 图标，所以我想到之前写项目时用到的 layui。

问题

参考 layui 中文文档的使用，我成功使用了layui自带的 icon 图标，但是当时我顺便用了下 layui 中的导航，但并没有导航效果，而且我需要使用 js 方法，如 layer 弹出层时，发生了错误——

单纯使用 import layui from 'layui' 无法正常调用那些功能！！

解决

于是我在百度无果后求助了教学老师，经过老师测试之后，首先缺少了 jQuery 模块。当天并没有成功引用，老师建议我去搜索 vue layui 的关键字眼。

接着又是一天的百度，不得不说网上的博客重复率真的很大，很耽搁事儿。

我搜索到的解决方案有好几种（无效）：

1. 安装 layui-src 还是 layui ，并在 main.js 文件里用 import layui from 'layui-src / layui' 导入，并 Vue.use(layui) 的，但并没有详细说明在组件里如何使用，仅看案例，使用 layui.xxx 会提示 layui is defind。

2. 安装 layui ，再复制文件到 public 的目录下（即官网下载的）index.html 处引用，然后再用 layui.use（官网的案例），使用 layui 相关的功能，但并没有说明是否需要向第一个方法一样在某个公共文件处注册全局，所以也会提示 layui is defind 的错误。

3. 安装 layui ，复制文件到 static 的目录下（即官网下载的）index.html 处引用，然后用 window.layui.use 来使用 layui 相关功能，其实这个已经很接近正确的方式了。

4. 安装 layui ，导入 node_modules 下的 layui 里的 dist 存放的 js 和 css 文件，使用方法同2。

最后还是麻烦了老师，我在旁观察老师的操作，个人理解是通过 npm run build 命令打包整个 vue 项目，然后使用了 http-server 包运行了生成出来的项目，发现关于 layui 的 css 和 js 文件都无法找到，然后去找了网上的 cdn 链接，后，按照如下写法：

  window.layui.use('layer', function() {
        var layer = window.layui.layer

        layer.msg('hello')
      })

即可成功使用，注意的是，layui 作为调用方法的最大对象，应该是挂在在window里，记得一定要使用 jQuery ！！（大概吧）

总结

最重要！：public 下存放 layui 文件，功能用 window.layui 。至于 jQuery 和 是否要安装npm 等明日测试了再更新。
附上截图：

image.png image.png image.png image.png

具体有什么问题可以留言告诉我，(* ^ ▽ ^ *)

感受

虽然解决问题的人不是我，但是寻找问题的过程中我也发现了这并非一件难事（毕竟在找到第二种和第三种方法时几乎快接近答案了！我可能是败在了一定的懒惰和初学者的认知上）。

即便 element-ui 是和 vue 的最佳拍档（项目中也可能不太会使用 layui ？对此抱怀疑的态度），可也不要因为这种原因和无法找到解决方案而放弃使用任何一种技术！

本来今天我是打算放弃去寻找如何在 vue-cli 中使用 layui 的，但想了想既然有问题就要解决。

当时老师找问题的时候（花了半个小时测试排查问题），其实我也有点想放弃的心态，还好是老师解决了呢！不过，这得警示自己，不要因为一点贪玩和懒惰的心思而放弃寻求答案！

最后，不仅解决了问题，还了解到了课外没有讲到的知识！比如把 layui 的文件放在 static 和 public 下有什么区别；http-server 这个模块了解了一下；npm run build 命令会出现什么样的文件；问题的根源不是我引入正确而方法错误，就是方法正确而引入错误！！

真是谓：失之毫厘谬以千里

—————————— 更新 ——————————

测试之后，只要 public 下有文件就OK，不需要安装 jQuery 和 layui 。但是一定记得方法别用错咯。