vue-cli 使用 layui

226 阅读1分钟

国内能访问且下载源码的网站: www.uimaker.com/layui/index…

第一步,访问官网,下载源码,提取压缩包中的 layui 文件放在 vue-cli 下的 public 文件夹下。

image.png

第二步,在 public 文件夹下的 index.html 里分别引入 layui 的 css 文件和 js 文件。

image.png

第三步,除了纯 css 样式外,如导航或者弹出层等需要用到 JavaScript 的地方,首先去 layui 找到需要使用的组件,在 layui 关于该组件描述的开头找到如截图所示的 在 layui 中使用 layer ————

image.png

复制代码到你的某个组件下 ==>

image.png

报错了?不要紧,在两处报错的地方修改为 window.layui

image.png

接着运行即可成功看到效果。

总结

在初学 vue 时,习惯性以为 layui 也需要像 element-ui 一样进行 npm 安装。实则昨天请教老师后,再经过测试,压根不需要在项目下安装 layui,只要你的 public 下有这个文件并且引入正确,然后在对应的组件那儿按照如上方式调用即可。

这只是一些比较简单的调用,关于复杂的或者大量复用的还需改进或者研究用法……