layui的引用js踩坑

前言:

今天因为项目需要,需要使用layui,因为本身不多的前端经验,以为layui的用法和其他的前端框架,例如jquery,bootstrap等等,只需要直接引入layui.js,和layui.css就可以直接使用了,但是在我使用的时候,却一直提示找不到我use的那个模块,因为这个问题折腾了一下午,终于找到原因,特此记录

出现这个问题的原因,主要是因为没有从头开始看文档,一开始接触的时候,直接去百度搜用法,但是其他地方的各种博客什么的,只是告诉你引入layui.js和layui.css这个步骤,如果你只把这两个文件下载下来进行引用,那么是行不通的,我们先来看看layui的文档的开头介绍

从layui的开头介绍可以看到,layui的完整的目录结构是这样的,再看下面这句话,

原来,layui是在你使用某个模块的时候,当你使用layui.use,layui会去你的目录结构里的lay下的modules下找你引用的那个模块。如果你只引入了layui.js这个文件,那他找不到这个目录,找不到这个模块。你想要使用的功能就不会生效,官方文档上说的获得layui,其实意思是你要把layui的完整目录下载下来,在这个前提条件下,再引入layui.js,这个时候你才不用管其他的文件,可以直接使用,使用的方法例如这样,

1 layui.use([‘layer‘, ‘form‘], function(){
2   var layer = layui.layer
3   ,form = layui.form;
4
5   layer.msg(‘Hello World‘);
6 });

layui.use代码你使用的哪个模块,然后layui会帮你去加载你使用的这个模块当然,还有一种其他的方法,就是引入layui.all.js 这个文件。这样就可以不用引入layui的完整目录,

就像官方文档所说的,一次性全部加载,但是这样的语法和之前就不一样了。所以会变动比较大。如果你用的是layui.all.js但是却又在用layui.use这样的语法,当然是行不通的,反之亦然。

遇到此坑,特此记录

原文地址:https://www.cnblogs.com/blackmlik/p/12003966.html

时间: 2024-10-15 10:44:35

layui的引用js踩坑的相关文章

react js踩坑之路(一)

讲真如果让我选个主流的mvvm框架做项目,我会果断选择vue,写起来不要太方便哦.但是,pc端要兼容ie8这个坑货,所以pc端只好选用react了啦~移动端果断用vue咯 再来讲讲构建工具,还是基于webpack 和 gulp,然后将react和vue 分开打包相关配置如下 webpack会依次将公用的打包到vendors.js .react的打包到react中,vue相关的打包到vue中,最后剩下的部分打包到load.js中. 下面直接用react实现一个后台页面的container组件吧,这

nuxt.js踩坑之 - SSR 与 CSR 显示不一致问题

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside<p>, or missing <tbody>. Bailing hydration and perfor

使用video.js踩坑。单页切换后无法播放

问题:动态创建多个video实例后,切换其他页面后在切换回来,无法播放,控制台报警告id被占用! 思路:在生命周期beforeDestroy函数中销毁创建的video实例. 代码: beforeDestroy(){ //(第三步)在销毁之前拿到video实例 for(let i=0;i<this.playlist.length;i++){ this.playlist[i].dispose(); //(第四步)dispose()是官方的销毁函数 } }, mounted() { setTimeou

Vue(踩坑)vue.esm.js?efeb:628 [Vue warn]: Error in render: &quot;TypeError: Cannot read property &#39;0&#39; of undefined&quot; found in

1.项目报错如下 2.原因: 异步显示的数据先显示vuex中的初始数据,再显示请求的数据,一开始在vuex中state中的初始数据为空,报错是因为在显示初始数据的时候报错 3.解决:避免在没有数据的时候显示解析(有数据才解析) 有数据的时候div才存在,用v-if控制一下 5.总结:表达式有一层表达式(a),二层表达式(a.b),三层表达式(a.b.c), 当表达式三层的时候就有问题:比如a开始为空,a.b:的结果为undefined, a.b.c你再取的时候就会报错了 Vue(踩坑)vue.e

jQuery版本升级踩坑大全

背景 -------------------------------------------------------------------------------- jQuery想必各个web工程师都再熟悉不过了,不过现如今很多网站还采用了很古老的jQuery版本.其实如果早期版本使用不当,可能会有DOMXSS漏洞,非常建议升级到jQuery 1.9.x或以上版本.前段时间我就主导了这件事情,把公司里我们组负责的项目jQuery版本从1.4.2升级到了jQuery 1.11.3.jQuery官

jQuery升级踩坑大全

背景 jQuery想必各个web工程师都再熟悉不过了,不过现如今很多网站还采用了很古老的jQuery版本.其实如果早期版本使用不当,可能会有DOMXSS漏洞,非常建议升级到jQuery 1.9.x或以上版本.前段时间我就主导了这件事情,把公司里我们组负责的项目jQuery版本从1.4.2升级到了jQuery 1.11.3.jQuery官方也为类似升级工作提供了jQuery Migrate插件. 言归正传. 坑从何处来 jQuery 1.11.3是1.x时代的最后一个版本(作者更新:2016年1月

webpack踩坑之路 (2)——图片的路径与打包

webpack踩坑之路 (2)--图片的路径与打包 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我们就来分析下在webpack项目中图片的应用场景. 在实际生产中有以下几种图片的引用方式: 1. HTML文件中img标签的src属性引用或者内嵌样式引用 <img src="photo.jpg" /> <div style="background:url(ph

webpack踩坑

运行效率 如果项目是多入口配置,在本地开发阶段不需要每次都跑全部的 可以获取到运行命令行参数决定,跑哪些页面,加快速度 process.env.npm_config_argv或者使用yargs这个npm包获取命令行传入的参数 1 2 3 4 5 6 7 var scriptArg = process.env.npm_config_argv && JSON.parse(process.env.npm_config_argv); var targetDir = scriptArg &&

html2canvas踩坑日记

近日要开发一个能将生成的二维码另存为图片的功能(该图片呢,肯定不止一个二维码,还包括背景.文字等其他元素),首先呢,就想到了html2canvas,随便一百度就是各种踩坑日志,我也随一下大流,记录本人在开发过程中遇到的坑. 1.基本用法: 在html2canvas上找到了它的基本用法以及压缩包 <div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="