layui 首个版本发布于 2016 年，layui 官网于 2021年10月13日 下线。新版下载、文档和示例在内的所有框架日常维护工作，全部迁移到 Github 和 Gitee。
对于 产品的下架呢？ 也感到有些莫名的伤感，虽然刚开始用的时候会经常性的吐槽。但是呢————是吧？
不管咋样吧，感恩作者这几年的付出（鞠躬.gif）

开始进入正题哈

安装

  1. 官网 官网 官方文档镜像链接
  2. Git 仓库下载 Git 链接
  3. github github 链接
  4. npm
  5. CDN

layui 有 CSS、JS、组件库，文件间相互关联，所以建议使用本地文件包，而非使用 bootCDN。 在测试项目或练习中使用 layui.all.js 来使用所有内置模块。上线项目则推荐使用 layui.js 根据需求引入指定模块。

引入 【layui.js】 文件支持的语法与引入 【layui.all.js】 文件支持的语法略有不同

layui.js 需要先“引入”再支持功能： layui.use(‘layer’, function () { // layui.use(模块名称，回调) layui.layer.msg(222); });
不支持： layui.layer.msg(111); 而使用 layui.all.js 两种语法都支持

起步

引入了样式文件和脚本文件以后就可以从官网组件开始了。

  1. <head>
  2.   ...
  3.   <link rel="stylesheet" href="./layui/css/layui.css">
  4. </head>
  6. <body>
  7.   <script src="./layui/layui.all.js"></script>
  8. </body>

样式起步从按钮开始

拷贝示例代码，并挂类（跟 bootstrap 不能说一毛一样，只能说毫无差别。 狗头.jpg）
Layui 搭建 - 图1

模块化使用方式

Layui 搭建 - 图2
与引入了 jQuery 文件就拥有 jQuery（$）核心对象一样，引入了 layui 的 js 文件就有 layui 核心对象。
layui.use() 方法就表示使用模块。
假设当前引入的是 layui.js 那么在使用模块时，就要先.use( ) 表示使用某个模块：

  1. layui.use('mod',function(){
  2.     // 具体代码
  3. });

弹出层 layer

  1. layui.use('layer', function(){
  2.   var layer = layui.layer;
  3.   layer.msg('hello');
  4. });  
  6. // 等同于一个链式操作
  7. layui.use('layer', function () {
  8.   layui.layer.msg('Hello world');
  9. });

Layui 搭建 - 图3
layui 内置了 jQuery，就可以直接使用 jQuery 语法获取到某个元素节点

  1. const $ = layui.$;
  2. $('#btn').click(function{}); // 可以使用 jquery 的方法了

结合一下点击事件 + 弹出层：

  1. const $ = layui.$;
  2. $('#btn').click(function () {
  3.   layui.use('layer', function () {
  4.     layui.layer.msg(111);
  5.   });
  6. });

日期与时间 laydate

  1. layui.use('laydate', function () {
  2.   layui.laydate.render({
  3.     elem: '#testLaydate', // 绑定到某一个元素，这里是一个 input 框
  4.   });
  5. });

快速搭建一个后台管理系统

一个后台管理系统的布局通常长这样：
Layui 搭建 - 图4
在官方文档【布局】-【管理系统界面布局】- 【预览布局效果】- 【查看该布局代码】有完整代码可供快速搭建网页结构：

  1. <!DOCTYPE html>
  2. <html>
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7.     <title>layout 管理系统大布局 - Layui</title>
  8.     <link rel="stylesheet" href="./layui/css/layui.css">
  9.   </head>
  11.   <body>
  12.     <div class="layui-layout layui-layout-admin">
  13.       <div class="layui-header">
  14.         <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
  15.         <!-- 头部区域（可配合layui 已有的水平导航） -->
  16.         <ul class="layui-nav layui-layout-left">
  17.           <!-- 移动端显示 -->
  18.           <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
  19.             <i class="layui-icon layui-icon-spread-left"></i>
  20.           </li>
  22.           <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
  23.           <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
  24.           <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
  25.           <li class="layui-nav-item">
  26.             <a href="javascript:;">nav groups</a>
  27.             <dl class="layui-nav-child">
  28.               <dd><a href="">menu 11</a></dd>
  29.               <dd><a href="">menu 22</a></dd>
  30.               <dd><a href="">menu 33</a></dd>
  31.             </dl>
  32.           </li>
  33.         </ul>
  34.         <ul class="layui-nav layui-layout-right">
  35.           <li class="layui-nav-item layui-hide layui-show-md-inline-block">
  36.             <a href="javascript:;">
  37.               <img src="http://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
  38.                    class="layui-nav-img">
  39.               tester
  40.             </a>
  41.             <dl class="layui-nav-child">
  42.               <dd><a href="">Your Profile</a></dd>
  43.               <dd><a href="">Settings</a></dd>
  44.               <dd><a href="">Sign out</a></dd>
  45.             </dl>
  46.           </li>
  47.           <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
  48.             <a href="javascript:;">
  49.               <i class="layui-icon layui-icon-more-vertical"></i>
  50.             </a>
  51.           </li>
  52.         </ul>
  53.       </div>
  55.       <div class="layui-side layui-bg-black">
  56.         <div class="layui-side-scroll">
  57.           <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
  58.           <ul class="layui-nav layui-nav-tree" lay-filter="test">
  59.             <li class="layui-nav-item layui-nav-itemed">
  60.               <a class="" href="javascript:;">menu group 1</a>
  61.               <dl class="layui-nav-child">
  62.                 <dd><a href="javascript:;">menu 1</a></dd>
  63.                 <dd><a href="javascript:;">menu 2</a></dd>
  64.                 <dd><a href="javascript:;">menu 3</a></dd>
  65.                 <dd><a href="">the links</a></dd>
  66.               </dl>
  67.             </li>
  68.             <li class="layui-nav-item">
  69.               <a href="javascript:;">menu group 2</a>
  70.               <dl class="layui-nav-child">
  71.                 <dd><a href="javascript:;">list 1</a></dd>
  72.                 <dd><a href="javascript:;">list 2</a></dd>
  73.                 <dd><a href="">超链接</a></dd>
  74.               </dl>
  75.             </li>
  76.             <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
  77.             <li class="layui-nav-item"><a href="">the links</a></li>
  78.           </ul>
  79.         </div>
  80.       </div>
  82.       <div class="layui-body">
  83.         <!-- 内容主体区域 -->
  84.         <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
  85.       </div>
  87.       <div class="layui-footer">
  88.         <!-- 底部固定区域 -->
  89.         底部固定区域
  90.       </div>
  91.     </div>
  92.     <script src="./layui/layui.js"></script>
  93.     <script>
  94.       layui.use(['element', 'layer', 'util'], function () {
  95.         var element = layui.element,
  96.             layer = layui.layer,
  97.             util = layui.util,
  98.             $ = layui.$;
  100.         //头部事件
  101.         util.event('lay-header-event', {
  102.           //左侧菜单事件
  103.           menuLeft: function (othis) {
  104.             layer.msg('展开左侧菜单的操作', { icon: 0 });
  105.           },
  106.           menuRight: function () {
  107.             layer.open({
  108.               type: 1,
  109.               content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
  110.               area: ['260px', '100%'],
  111.               offset: 'rt', //右上角
  112.               anim: 5,
  113.               shadeClose: true
  114.             });
  115.           }
  116.         });
  117.       });
  118.     </script>
  119.   </body>
  121. </html>

在官方布局基础上，修改了一些符合我们需要的部分：

  1. <!DOCTYPE html>
  2. <html>
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7.     <title>layout 管理系统大布局 - Layui</title>
  8.     <link rel="stylesheet" href="./layui/css/layui.css">
  9.   </head>
  11.   <body>
  12.     <div class="layui-layout layui-layout-admin">
  13.       <!-- 头部导航 -->
  14.       <div class="layui-header layui-bg-cyan">
  15.         <div class="layui-logo ">一个学生管理系统</div>
  16.         <!-- 头部区域（可配合layui 已有的水平导航） -->
  17.         <ul class="layui-nav layui-layout-left">
  18.           <li class="layui-nav-item layui-hide-xs"><a href="">商品管理</a></li>
  19.           <li class="layui-nav-item">
  20.             <a href="javascript:;">其他内容</a>
  21.             <dl class="layui-nav-child">
  22.               <dd><a href="">其他内容1</a></dd>
  23.               <dd><a href="">其他内容2</a></dd>
  24.               <dd><a href="">其他内容3</a></dd>
  25.             </dl>
  26.           </li>
  27.         </ul>
  28.         <ul class="layui-nav layui-layout-right">
  29.           <li class="layui-nav-item layui-hide layui-show-md-inline-block">
  30.             <a href="javascript:;">
  31.               <img src="http://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
  32.               admin
  33.             </a>
  34.             <dl class="layui-nav-child">
  35.               <dd><a href="">退出登录</a></dd>
  36.             </dl>
  37.           </li>
  38.         </ul>
  39.       </div>
  40.       <!-- 左侧菜单 -->
  41.       <div class="layui-side layui-bg-cyan">
  42.         <div class="layui-side-scroll">
  43.           <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
  44.           <ul class="layui-nav layui-nav-tree layui-bg-cyan" lay-filter="test">
  45.             <li class="layui-nav-item layui-nav-itemed">
  46.               <a class="" href="javascript:;">学生模块</a>
  47.               <dl class="layui-nav-child">
  48.                 <dd><a href="javascript:;">学生管理</a></dd>
  49.                 <dd><a href="javascript:;">班级学生</a></dd>
  50.                 <dd><a href="javascript:;">课程学生</a></dd>
  51.               </dl>
  52.             </li>
  53.             <li class="layui-nav-item">
  54.               <a href="javascript:;">退换货记录</a>
  55.               <dl class="layui-nav-child">
  56.                 <dd><a href="javascript:;">退货记录</a></dd>
  57.                 <dd><a href="javascript:;">换货记录</a></dd>
  58.               </dl>
  59.             </li>
  60.             <li class="layui-nav-item"><a href="javascript:;">库存清点</a></li>
  61.             <li class="layui-nav-item"><a href="javascript:;">商品发布</a></li>
  62.           </ul>
  63.         </div>
  64.       </div>
  65.       <!-- 右侧内容主体 -->
  66.       <div class="layui-body">
  67.         <!-- 内容主体区域 -->
  68.         <div style="padding: 15px;">内容主体区域</div>
  69.       </div>
  71.       <!-- 底部固定区域 -->
  72.       <div class="layui-footer layui-word-aux">&copy; 哼，总有人想剽窃我的智慧</div>
  73.     </div>
  75.     <script src="./layui/layui.all.js"></script>
  76.     <script>
  77.       layui.use(['element', 'layer', 'util'], function () {
  78.         var element = layui.element,
  79.             layer = layui.layer,
  80.             util = layui.util,
  81.             $ = layui.$;
  83.         //头部事件
  84.         util.event('lay-header-event', {
  85.           //左侧菜单事件
  86.           menuLeft: function (othis) {
  87.             layer.msg('展开左侧菜单的操作', { icon: 0 });
  88.           },
  89.           menuRight: function () {
  90.             layer.open({
  91.               type: 1,
  92.               content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
  93.               area: ['260px', '100%'],
  94.               offset: 'rt', //右上角
  95.               anim: 5,
  96.               shadeClose: true
  97.             });
  98.           }
  99.         });
  100.       });
  101.     </script>
  102.   </body>
  104. </html>

显示的主题颜色从 black 变成了 cyan。
Layui 搭建 - 图5
你还可以写成彩色，只要你愿意》
Layui 搭建 - 图6

表格和分页

文档跑 这一页 来了，layui 最牛*的就是把表格的分页和排序功能内置了！
那么既然要显示表格，那么 student.html 里自然就该出现 table 标签了。再依照文档语法、利用 mock 生成一些随机数据：

  1. <!-- 这是在 student.html -->
  3. <table lay-filter='studentList' id='studentList'></table>
  4. <!-- 引入的 mock 文件已经引在了 index.html  -->
  5. <script>
  6.   // 生成随机数据，内容在语雀 Mock 那一篇都有讲解
  7.   let data = Mock.mock({
  8.     "list|27": [{
  9.       "id|+1": 1,
  10.       "name": "@cname()",
  11.       "age|16-22": 1,
  12.       "gender|1": ["男", "女"],
  13.       "score|0-100": 1,
  14.       "address": "@county(true)",
  15.       "phoneNumber": /^1[3458]\d{9}$/
  16.     }]
  17.   });
  19.   layui.table.render({
  20.     elem: '#studentList',  // 绑定节点
  21.     data: data.list, // value 为一个 array，数据从 mock 来
  22.     page: true, //开启分页
  23.     cols: [[ //表头
  24.       { field: 'id', title: '学号', sort: true, fixed: 'left' },
  25.       { field: 'name', title: '姓名' },
  26.       { field: 'age', title: '年龄', sort: true },
  27.       { field: 'gender', title: '性别', sort: true },
  28.       { field: 'score', title: '成绩', sort: true },
  29.       { field: 'address', title: '城市', width: 300, },
  30.       { field: 'phoneNumber', title: '电话号码', sort: true },
  31.     ]]
  32.   });
  33. </script>

Layui 搭建 - 图7

Layui 搭建 - 图8

大概内容就这些，有些我也没有搞明白，反正layui 很强大。喜欢 的可以深入的研究研究.

更新一个小提示

看看官网里的这句话，或许在某些地方～能帮你大忙
Layui 搭建 - 图9