layui的基本使用-Helloworld 三把斧的一把斧头的熟练起来

news2025/10/30 22:28:36

该笔记记录如何使用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>

打印效果