打开官网https://www.layui.com/下载这个框架
官网首页 下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。目录结构如下
├─css //css目录 │ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：） │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css //核心样式文件 ├─font //字体图标目录 ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情） │─lay //模块核心目录 │ └─modules //各模块组件 │─layui.js //基础核心库 └─layui.all.js //包含layui.js和所有模块的合并文件
基本入门：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代码 -->
<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use([‘layer‘, ‘form‘], function(){
var layer = layui.layer
,form = layui.form;
layer.msg(‘Hello World‘);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>非模块化方式使用layui</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<!-- 你的HTML代码 -->
<script src="../layui/layui.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
var layer = layui.layer
,form = layui.form;
layer.msg(‘Hello World‘);
}();
</script>
</body>
</html>
这两个代码主要是导入的js文件不一样。一个是layui.js跟layui.all.js，主要的区别是：
layui.all.js： 采用非模块化方式 非模块化不用每次都调用layui.use([],fun...)引入对应模块，引入的JS是/layui/layui.all.js
layui.js： 自动加载 模块化必须每次都调用layui.use([],fun...)引入对应模块，引入的JS是/layui/layui.js（推荐用这种，但是就是前面写起来麻烦）
原文：https://www.cnblogs.com/easyjie/p/12012250.html