layui是国人开发的前端UI框架，主打轻量易用呗。

不用搞复杂的工程化配置，引两个文件就能用，后端程序员做后台页面、前端新手写小项目，用它效率特别高。

先讲适用场景。

你要做个后台管理系统，需要表单、表格、弹窗、导航这些常用模块，不想自己写CSS调兼容性，也不想花时间啃Vue、React的复杂语法，选layui准没错。

它的所有组件都封装好了，改改参数就能用，比自己从零写快好几倍。

再讲入门步骤，一共两步。

第一步，引资源。要么去官方网站下载完整包，要么直接用公共CDN的链接，就两个文件：layui.css负责样式，layui.js负责逻辑，直接插到你的HTML文件里就行，不用装任何依赖。

第二步，调组件。所有组件都要通过layui.use加载，比如你要用表格，就写layui.use([''table''], function(){

var table = layui.table

// 在这里写表格的逻辑

})

别在use外面调用组件，肯定报错。

说几个最高频的组件用法，都是实打实能省时间的。

第一个是表格。你只要在HTML里放个空的table标签，给个id。然后在js里调用table.render，填好后端接口地址、每列对应的字段名，分页、排序、隔行变色这些功能自动就出来了，不用自己写分页逻辑，连请求参数的格式框架都给你规定好了，后端照着接就行。

第二个是表单。给form标签加个lay-filter属性，输入框加lay-verify属性，比如填required就是必填，填phone就是自动校验手机号格式，提交的时候不用你自己写正则判断，错了框架直接弹提示，省了好多校验的代码。

第三个是弹窗layer，这是layui最出圈的组件，很多人哪怕不用layui别的功能，也会单独引layer用。弹成功提示、弹确认框、弹内嵌页面，一行代码就能搞定，比如layer.msg(''保存成功'')，比原生的alert好看太多，也不用自己写弹窗的遮罩、关闭按钮这些东西。

再讲几个新手必踩的坑，提前避过少走弯路。

动态生成的元素，比如js往页面里加的按钮、表格里渲染出来的操作栏，绑定点击事件不能直接用$(''.btn'').click()，要么用layui自带的事件监听，要么用jquery的on事件委托，不然点了没反应。

表单如果是js动态赋值的，或者你动态加了表单项，一定要调用form.render()刷新一下，不然页面上显示的还是旧，提交也拿不到新值。

不要直接改layui源文件里的css，要改样式就自己单独写个css文件，选择器优先级写高一点覆盖原生样式就行，不然以后更新layui版本，你改的东西全没了。

最后说下现状，前几年layui官方停更过一阵，现在已经重启了，2.8以上的版本一直在更，常用的组件都有，生态也还活着，应付中小项目完全够用。

不用觉得它老，能快速解决问题的工具就是好工具。如果你是刚入门前端，或者是后端程序员不想费劲儿研究复杂的前端框架，花两个小时把常用组件摸熟，做个后台页面绰绰有余。