Layui是一款由国内开发者“贤心”于2016年10月创建的开源前端UI框架，采用MIT许可证协议，面向所有Web开发者开放使用。与Bootstrap、Element UI等主流框架不同，Layui秉持“返璞归真”的设计理念——它不依赖于任何前端工程化工具（如Webpack、Vite），也不强绑定MVVM框架，而是基于原生HTML/CSS/JavaScript，采用自身轻量级模块化规范，让开发者只需面对浏览器本身，就能快速构建出美观、交互丰富的网页界面。
在当今前端工具链日益复杂、框架层出不穷的背景下，Layui选择了一条与众不同的道路。它不追求成为技术最前沿的“弄潮儿”，而是专注于为后端开发者、传统Web开发者以及那些追求高效、简洁开发体验的群体提供一套“拿来即用”的UI解决方案。正如其官网所言：“layui 定义为‘经典模块化’，并非是自吹她自身有多优秀，而是有意避开当下JS社区的主流方案，试图以最简单的方式去诠释高效”。
本文将从Layui的核心理念入手，系统全面地介绍其模块化机制、布局系统、通用元素及核心组件的使用方法，并结合最新的3.0.0-alpha版本特性，帮助读者从零基础快速上手，掌握这一“情怀型”UI框架的精髓。
一、Layui概述与核心理念
1.1 什么是Layui？
Layui是一款“经典模块化”前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。它主要由两大部分构成：
UI元素（视觉层）：包含布局、颜色、字体图标、动画、按钮、表单、导航、表格、进度条、面板等大量纯CSS样式控制的界面元素。
JavaScript模块（交互层）：包含弹层（layer）、日期选择（laydate）、分页（laypage）、表格（table）、表单（form）、上传（upload）、树形组件（tree）、轮播（carousel）等丰富的动态功能模块。
1.2 核心设计理念
“返璞归真” 是Layui的核心哲学。它不随波逐流，不强制开发者使用复杂的工程化工具，而是回归到最原始的Web开发方式——在HTML文件中写结构，在CSS中定义样式，在Script标签里写交互。这种理念特别适合以下几类人群：
后端开发工程师：无需深入前端工程化体系，即可快速搭建后台管理系统界面。
追求高效开发的创业者/个人开发者：省去配置打包工具的繁琐，专注于业务逻辑。
维护老旧项目的开发者：Layui的模块化方式可灵活嵌入任何传统Web项目中。
前端初学者：无需理解npm、webpack等复杂概念，打开一个HTML文件就能开始学习。
1.3 与其他框架的对比
1.4 版本演进与生态现状
Layui自发布以来，经历了从1.0到2.x再到3.0-alpha的多个重要版本迭代：
2016年：Layui 1.0正式发布，开创了国产UI框架的新纪元。
2017-2018年：2.x版本逐步成熟，成为后台管理系统开发的首选方案之一。
2021年：官方曾发布官网下线的公告，导致社区误以为项目停更。但实际上，Layui团队依然在Gitee和Github上保持活跃，持续迭代。
2023年4月：2.8.0正式版发布，调整主色调为#16baaa，优化构建流程并新增18个字体图标。
2025-2026年：2.10+至2.11+版本引入标准化component模块构建器，全新设计了tabs标签页组件，并重构了laytpl模板引擎。
2026年3月：3.0.0-alpha版本发布，标志着Layui迈入现代化。该版本将模块系统全面迁移至ES Module，并采用Rollup + Babel + PostCSS的组合式构建流程，同时提供了CSS Variable支持，让重置主题变得更加方便。
虽然前端世界日新月异，但Layui依然以其独特的定位和低门槛优势，在许多中小型项目、内部管理系统以及老项目维护中发挥着重要作用。据不完全统计，截至2026年初，Layui在Gitee上已获得超过3万Star，累计被应用于超过200万个Web项目。
二、模块化机制与配置
Layui最大的特色之一是其内置的轻量级模块加载器。这一点与必须借助Webpack或RequireJS的框架不同，Layui自带了一套模块定义和加载的规范。这使得开发者可以在不依赖任何第三方工具的情况下，轻松管理代码的依赖关系。
2.1 核心文件引入
使用Layui时，只需在页面中引入两个核心文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. 引入 Layui CSS 样式文件 -->
<link rel="stylesheet" href="/path/to/layui/css/layui.css">
</head>
<body>
<!-- 页面内容 -->
<!-- 2. 引入 Layui JS 核心文件 -->
<script src="/path/to/layui/layui.js"></script>
</body>
</html>
值得注意的是，Layui内置了jQuery（但无需开发者手动引入），且其核心文件加载后，会根据需要自动按需加载其他模块的JS文件，这也是它体积轻盈的原因之一。
2.2 模块加载方式
Layui提供了两种主要的模块使用方式，以适应不同场景。
方式一：标准模块化加载（推荐）
这种方式遵循“按需加载”原则，通过layui.use()方法加载所需的模块，只有在回调函数中才能使用该模块的API。它有利于减少初始加载的资源体积。
<script>
layui.use(['layer', 'form', 'table'], function(){
// 注意：这里的参数名称必须与模块名称一致
var layer = layui.layer;
var form = layui.form;
var table = layui.table;
// 现在可以使用 layer 弹出层了
layer.msg('Hello Layui');
// 使用 form 模块渲染表单（动态生成的表单需要重新渲染）
form.render();
});
</script>
方式二：非模块化加载（一次性加载）
https://hllft.cn/category/hardware-review.html
如果你觉得每次使用前都要layui.use很繁琐，Layui也提供了layui.all.js文件，它包含了所有内置模块。引入后可以直接使用layui.模块名调用API。
<script src="/path/to/layui/layui.all.js"></script>
<script>
// 无需 use，直接使用
layui.layer.msg('Hello All');
</script>
2.3 模块定义与扩展
Layui允许开发者使用layui.define()方法定义自己的模块，这对于封装复用的业务组件非常有用。
// 自定义模块 mymodule.js
layui.define(['layer', 'form'], function(exports){
var layer = layui.layer;
var api = {
showMsg: function(msg){
layer.msg(msg);
},
showConfirm: function(msg, callback){
layer.confirm(msg, {icon: 3, title: '提示'}, function(index){
layer.close(index);
if(callback) callback();
});
}
};
// 输出模块接口
exports('mymodule', api);
});
// 页面中使用自定义模块
layui.use(['mymodule'], function(){
var mymodule = layui.mymodule;
mymodule.showMsg('自定义模块加载成功');
mymodule.showConfirm('确定要执行此操作吗？', function(){
console.log('用户点击了确定');
});
});
2.4 全局配置
可以通过layui.config()方法对Layui进行全局配置，例如设置模块的根目录、调试模式等。
layui.config({
base: '/static/js/modules/', // 自定义模块的存放路径
version: '20260413', // 版本号，可用于避免缓存
debug: false // 调试模式，开启后模块加载失败会报错
}).extend({
// 扩展自定义模块的别名，方便使用
mymodule: 'modules/mymodule'
}).use(['layer', 'mymodule'], function(){
var layer = layui.layer;
var mymodule = layui.mymodule;
// ...
});
