该笔记记录如何使用layui的模块化方法。
- 访问layui官网 Layui - 极简模块化前端 UI 组件库
- 下载官网的layui压缩包文件,解压到本地文件夹,文件结构如下:
vscode创建项目;
位置
测试写了三个文件夹,才测试出来bug 坑所在,知道原因。引入没有错误,错误的是位置啊。
真坑啊也是,新手测试一定注意的地方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- layui的核心CSS文件 -->
<link rel="stylesheet" href="layui/css/layui.css" >
<script src="layui/layui.js" type="text/JavaScript" charset="uft-8"> </script>
</head>
<body>
<h1>demo</h1>
<script>
// Usage
layui.use(function(){
var layer = layui.layer;
// Welcome 没有引入错误,但是位置放错了,就不行啊
layer.msg('Hello World', {icon: 6});
// layer.msg('没有引入错误,但是位置放错了,就不行啊', {icon: 6});
});
</script>
</body>
</html>
打印效果