《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：
1.2 搭建Layui开发环境与两种使用方式
搭建Layui开发环境与两种使用方式。
1.2.1 搭建Layui开发环境
Layui官方网址如下：
当前最新版本为2.5.6，如图1-xx所示。
图1-xx
下载量已经达到1653422次，足以见证Layui的流行。
Layui是开源的项目，github和gitee地址如下：
https://github.com/sentsin/layui/
https://gitee.com/sentsin/layui
Layui官方公众号如图1-xx所示。
图1-xx
在Layui官网中点击“立即下载”按钮开始下载Layui，下载文件是layui-v2.5.6.zip。
解压layui-v2.5.6.zip文件，内容如图1-xx所示。
图1-xx
进入“layui”文件夹，如图1-xx所示。
图1-xx
继续进入“css”文件夹，如图1-xx所示。
图1-xx
使用Layui开发时，需要引入layui.all.js和layui.css文件。
整体目录结构如图1-xx所示。
图1-xx
进入“文档与示例”文件夹，如图1-xx所示。
图1-xx
由于Layui是中国人开发的，所以开发文档非常友好，易于学习。
1.2.2 两种使用方式
两种使用方式：
（1）模块化：加载指定模块。
（2）非模块化：加载全部模块。
使用Layui需要引入layui/css/layui.css和layui/layui.js文件。如果是采用非模块化方式可以引入layui/layui.all.js文件。
1.2.2.1 加载单独模块
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<script src="layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function() {
var layer = layui.layer;
var form = layui.form;
layer.msg('Hello World');
});
</script>
</body>
</html>
针对性的加载了layer和form模块。
运行结果如图1-xx所示。
为了提高运行效率，使用如下代码加载指定的模块：
layui.use(['layer', 'form'], function() {
var layer = layui.layer;
var form = layui.form;
layer.msg('Hello World');
});
1.2.2.2 加载全部模块
加载全部模块的示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<script src="layui/layui.all.js"></script>
<script>
var layer = layui.layer;
var form = layui.form;
layer.msg('Hello World');
</script>
</body>
</html>
不需要使用layui.use()方法加载指定模块，因为全部模块已经自动加载完毕。
如果是线上环境，更推荐使用全模块加载，即直接引入layui.all.js文件，它包含了layui所有的内置模块，无需再通过layui.use()方法加载模块，直接调用即可。
扫一扫
4010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
