layui的引用js踩坑

摘要:
前言:今天,由于项目需要,我们需要使用layui。因为我们没有太多的前端经验,我们只需要直接引入layui。js和layui到layui和其他前端框架的使用,例如jquery和bootstrap Css可以直接使用,但当我使用它时,我总是提醒我找不到我使用的模块,因为这个问题已经折腾了一下午,终于找到了原因。我在此记录下这个问题的原因,主要是因为我没有从一开始就阅读该文件。当我第一次接触百度时,我直接去了百度

前言:

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

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

layui的引用js踩坑第1张

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

layui的引用js踩坑第2张

 原来,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的引用js踩坑第3张

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

遇到此坑,特此记录

免责声明:文章转载自《layui的引用js踩坑》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【洛谷P2504】聪明的猴子 最小瓶颈树Android.mk文件官方使用说明下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

图论介绍(Graph Theory)

G-v具有比G更多的连通分支,因此v被称为G的截断点G-e具有比G多的连通分支。定理:连通图G,其中e是桥e不属于G的任何环有顶点u,v,使得任何路径u-v都通过e连通图G;而w是存储在顶点u,v处的割点,使得任意路径u-v通过w定义:顶点之间的距离x-y:所有x-y路径的最小长度。...

Vue浏览器调试工具VueTools安装以及使用

ue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率。vue-devtools使用起来还是比较简单的,上手非常的容易,这里就细讲其使用说明了。安装方法二:这里以chrome浏览器为例:1、打开chrome网上应用店,搜索vue.js注:如果打不开页面需要代理选择第一个,点击添加至chr...

【Lua】table表删除指定元素 (转)

删除表时,会找到一个表。remove(table,idx)方法用于根据表中的索引进行删除。当前要求是根据值进行删除。quick-x中还有一个相应的表方法封装:1.根据表中的值删除--删除表中的指定元素(而不是根据索引)--@paramarray要操作的容器--@paramvalue删除值--@paramremo...

CentOS7 复制文件夹和移动文件夹

CentOS7在Linux中复制、移动和删除文件的命令有:cp、mv、rm I。文件复制命令cp命令格式:cp[-adfilprsu]源文件(source)目标文件(destination)cp[option]source1source2source3…directory参数描述:-a:指存档,即复制所有目录-d:如果源文件是连接文件(linkfile...

js 设计模式

出乎意料的是,事件只有在离我很近并且需要发布的时候才能执行。5.适配器模式:很像接口传输。例如,后端的数据不能直接用于jsTree。使用适配器模式将数据传输到jsTree格式是编程的基本理念。我平时没注意到,但我不小心用了很多。...

windows下vue项目启动步骤

辗转反侧之后,我终于开始了构建的vue项目。我记下了备份步骤。它只适用于那些没有启动前端项目经验的人,可能对其他人没有参考价值:OS:windows7gitclone已经为构建的vue项目安装了Nodejs。6.10以上的最新版本似乎能够自动配置路径和npm。无论如何,安装后,我可以使用cmd在任何路径下查询“node version”或“npm-v”以提供...