LayUI 是由国内开发者“贤心”于 2016 年创建的一款经典模块化前端 UI 框架，遵循 MIT 协议开源。在 Vue、React 等现代框架大行其道的今天，LayUI 依然凭借其“返璞归真”的设计理念、极低的学习门槛和开箱即用的丰富组件，在广大后端开发者、传统 Web 开发者以及中小型项目中占据着独特的地位。
LayUI 最大的特色在于它不依赖任何第三方工具或框架，采用自身轻量级模块化规范，让开发者只需面对浏览器本身，就能快速构建出美观、交互丰富、响应式的网页界面。正如其官网所言：“layui 定义为‘经典模块化’，并非是自吹她自身有多优秀，而是有意避开当下 JS 社区的主流方案，试图以最简单的方式去诠释高效”。
本文将从 LayUI 的核心理念入手，系统全面地介绍其模块化机制、UI 组件、交互模块及最佳实践，帮助读者从零基础快速上手，掌握这一“情怀型”UI 框架的精髓。
一、LayUI 概述
1.1 什么是 LayUI
LayUI 是一款“经典模块化”前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。它主要由两大部分构成：
UI 元素（视觉层）：包含布局、颜色、字体图标、动画、按钮、表单、导航、表格、进度条、面板等大量纯 CSS 样式控制的界面元素。
JavaScript 模块（交互层）：包含弹层（layer）、日期选择（laydate）、分页（laypage）、表格（table）、表单（form）、上传（upload）、树形组件（tree）、轮播（carousel）等丰富的动态功能模块。
很多开发者最初对 LayUI 望而却步的顾虑之一是“它是否已经过时？”实际上，LayUI 在 2026 年的今天依然拥有活跃的社区和持续迭代。虽然 2021 年官方曾发布官网下线的公告，但这并非项目停更，而是团队将重心转移至 Gitee 和 GitHub 的持续开发。2023 年 2.8.0 正式版发布，调整主色调为 #16baaa，优化构建流程并新增 18 个字体图标；2025 年至 2026 年初，2.10+ 至 2.11+ 版本引入了标准化的 component 模块构建器，全新设计了 tabs 标签页组件，并重构了 laytpl 模板引擎。
1.2 核心设计理念
“返璞归真” 是 LayUI 的核心哲学。它不随波逐流，不强制开发者使用复杂的工程化工具（如 Webpack、Vite），也不强绑定 MVVM 框架，而是回归到最原始的 Web 开发方式——在 HTML 文件中写结构，在 CSS 中定义样式，在 Script 标签里写交互。
这种理念特别适合以下几类人群：
后端开发工程师：无需深入前端工程化体系，即可快速搭建后台管理系统界面。
追求高效开发的创业者/个人开发者：省去配置打包工具的繁琐，专注于业务逻辑。
维护老旧项目的开发者：LayUI 的模块化方式可灵活嵌入任何传统 Web 项目中。
前端初学者：无需理解 npm、webpack 等复杂概念，打开一个 HTML 文件就能开始学习。
1.3 与其他主流框架的对比
1.4 三大组成部分
LayUI 由以下三大核心部分组成：
layui.js：核心模块加载器，也是各模块的入口。
layui.all.js：包含所有内置模块的打包文件（非模块化加载）。
layui.css：样式核心文件，依赖该文件才能正常显示样式。
二、模块化机制与配置
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>
方式二：非模块化加载（一次性加载）
如果你觉得每次使用前都要 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;
// ...
});
