前言:

今天因为项目需要,需要使用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,这个时候你才不用管其他的文件,可以直接使用,使用的方法例如这样,

 layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form; layer.msg('Hello World');
});

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

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

遇到此坑,特此记录

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

  1. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  2. vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目

    vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...

  3. Nuxt.js 踩坑记录,(1)引入fs包报错

    今天又是码农的一天. 但是写着写着,不知道为啥就页面就报错了, 如图所示,我在db/app.js下引入了fs这个模块,提示我npm install,我也照做了,但是仍然报错. 通过各种百度,踩坑,最终 ...

  4. Nuxt.js 踩坑记录(2) 使用sequelize时,提示install mysql2,安装了仍然不能解决问题

    打算写一个nuxt.js+sequelize+mysql的个人博客,遇到了挺多坑,还是坚持了下来,终于解决了这个bug. 今天不知道我做了什么,页面就报错了,定位到了使用sequelize的JS文件里 ...

  5. Nuxt.js 踩坑笔记 - 缓存向

    零.前言 最近参与了一个立足 seo 的移动端项目,公司前端工程主栈 vue,所以理所当然的用上了 nuxt,UI 主要选择了 Vant.   一.公共列表页的缓存 公共列表页由于数据量较大,故需要滚 ...

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

    [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This ...

  7. Nuxt.js 踩坑记录(3) Net.connection xxxx

    浏览器报的是Net.connection啥的错误 项目运行时报错这个 [HPM] Error occurred while trying to proxy request article from l ...

  8. JS踩过的坑

    一:DOM对象的查找 DOM的查找到的对象,除byID的之外,返回的都是一个数组,并不是DOM对象无法调用DOM对象的方法. 通过id查找: 因为id在一个HTML文件中唯一,因此查找到的只会是一个元 ...

  9. 微信小程序使用pako.js的踩坑笔记

    问题 今天组长跟我们讨论了个问题,说是文章存储占用有点大,消耗宽带流量费,让我看看能不能找个方法解决一下(文章存储的是html字符串).第一反应是没什么头绪,能想到的就是将相同的字符串替换成一个标识之 ...

随机推荐

  1. python之爬取练习

    练习要求爬取http://yuedu.anyv.net/网址的最大页码数和文章标题和链接 网址页面截图: 代码截图: 完整代码: 根据网页显示页码的方式,爬取的所有页码中倒数第二个页码是最大页码. i ...

  2. Docker安装MySQL 8.0并挂载数据及配置文件

    安装部署环境 Ubuntu 18.04.3 LTS Docker 19.03.2 MySQL latest(8.0.17) 下载镜像 # docker从仓库中拉取最新版的mysql镜像,如果没加标签的 ...

  3. 利用re处理数据

    re模块为Python提供正则表达式功能,我们可以用它来处理数据 大多数时候我们用Python读取文件数据读进来都是字符串,想要提取里面想要的数据用正则表达式是个很不错的手段 下面是一个从读取数据中提 ...

  4. iOS: 线程中那些常见的锁

    一.介绍 在多线程开发中,锁的使用基本必不可少,主要是为了解决资源共享时出现争夺而导致数据不一致的问题,也就是线程安全问题.锁的种类很多,在实际开发中,需要根据情况选择性的选取使用,毕竟使用锁也是消耗 ...

  5. Python代码报错看不懂?记住这20个报错提示单词轻松解决bug

    1. syntaxerror: invalid syntax语法错误:无效语法 1) syntax [ˈsɪntæks] 语法.句法 2) error [ˈerər] 错误 3) invalid [ɪ ...

  6. IT兄弟连 Java语法教程 流程控制语句 循环结构语句3

    while循环 Java中的另外一种循环是while循环.while循环的语法格式如下: while(条件表达式){ 循环体; } 其中条件表达式定义了控制循环的条件,可以使任何有效的boolean表 ...

  7. ExtJS布局控件

    Layout Controls Auto Layout Ext JS4中的容器的默认布局是自动布局.这个布局管理器会自动地将组件放在一个容器中. Fit Layout Fit布局安排了容器的内容完全占 ...

  8. 学习UML类图

    在类图中一共包含以下几种模型元素,分别是:类(class).接口(interface)以及类之间的关系. 1.类(class) 在面向对象编程中,类是对现象世界中一组具有相同特征的物体的抽象. 2.接 ...

  9. 致Python初学者的六点建议

    Python是最容易学习的编程语言之一,其语法近似英语.通常,初学者只会遇到一些小麻烦,如强制缩进.在函数中使用self等. 然而,当开始阅读.复制和编辑他人代码时,麻烦就接踵而至了. 这里,我将解释 ...

  10. CSS元素显示模式

    CSS的元素显示模式 什么是元素显示模式 作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页 元素的显示模式就是元素(标签)以什么样的方式进行显示,比如& ...