《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()方法加载模块,直接调用即可。