LayUI的入门指南

最新推荐文章于 2025-06-01 09:01:01 发布

flat on failure

最新推荐文章于 2025-06-01 09:01:01 发布

阅读量869

点赞数 2

CC 4.0 BY-SA版权

分类专栏： LayUI框架文章标签： LayUI 后台框架

本文链接：https://blog.youkuaiyun.com/weixin_43749826/article/details/92172571

LayUI框架专栏收录该内容

1 篇文章

订阅专栏

LayUI是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，非常适合界面的快速开发。本文介绍了LayUI的特性、兼容性、模块化使用方式以及如何快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是LayUI?

layui，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用；非常适合界面的快速开发。

layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

注：MVVM是Model-View-ViewModel的简写；它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
LayUI图标

外文名	优点	类型	面向人群
Layui	原生开发模式、模块化、兼容性强	开源的模块化前端 UI 框架	后端开发者，前端工程师

LayUI兼容性和面向场景

layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 PC 端后台系统与前台界面的速成开发方案。

获取LayUI的几种方式

1、官网首页下载

你可以在官网首页下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。

2、 Git 仓库下载

你也可以通过 GitHub 或码云得到 layui 的完整开发包，以便于你进行二次开发

3、 npm 安装(一般用于 WebPack 管理)

LayUI存在的价值?

layui更多是面向于后端开发者，所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式，却又并非受限于 CommonJS 的那些条条框框，它拥有自己的模式，更加轻量和简单。layui 定义为“经典模块化”，并非是刻意强调“模块”理念本身，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效！它的所谓经典，是在于对返璞归真的执念，它以当前浏览器普通认可的方式去组织模块！ layui 认为这种轻量的组织方式，仍然可以填补 WebPack 以外的许多场景。所以它坚持采用经典模块化，也正是能让人避开工具的复杂配置，重新回归到原生态的 HTML/CSS/JavaScript本身！

AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范
由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出
requireJS主要解决两个问题
多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

CommonJS API定义很多普通应用程序（主要指非浏览器的应用）使用的API，从而填补了这个空白。它的终极目标是提供一个类似Python，Ruby和Java标准库。

LayUI的元素由什么组成?

layui的元素由：
布局（栅格、后台布局）、颜色、字体图标、动画、按钮、表单、导航条、面包屑、选项卡、进度条、面板、静态表格、徽章、时间线、辅助元素等

LayUI拥有哪些内置模块？

layui 提供了丰富的内置模块,其中主要包括：
layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。

├─css //css目录
│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
│ │ ├─laydate
│ │ ├─layer
│ │ └─layim
│ └─layui.css //核心样式文件
├─font //字体图标目录
├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含 layui.js 和所有模块的合并文件

LayUI拥有哪些兼容性?

Chrome / Firefox / Safari /Internet Explorer 8.0+

LayUI的简单应用

金典模块化方式

1、获得 layui 后，你只需要引入下面两个文件：

./layui/css/layui.css
./layui/layui.js //如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

2、不用去管其它任何文件；因为他们（比如各模块）都是在最终使用的时候才会自动加载。
我们来做一个基本的页面：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  
</head>
<body>
 
<!-- 你的静态页面HTML代码 -->
 
<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello LayUI User');
});
</script> 
</body>
</html>

layui具备AMD的影子，又并非受限于 CommonJS 的那些条条框框，layui认为这种轻量的组织方式，比WebPack更符合绝大多数场景。所以她坚持采用经典模块化，也正是能让人避开工具的复杂配置，回归简单，安静高效地编织原生态的HTML、CSS和JavaScript。
她与Bootstrap最大的不同恰恰在于她糅合了自身对经典模块化的理解。

模块化的用法（推荐）

1、遵循 layui 的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件

<script>
layui.config({
  base: '/res/js/modules/' //你存放新模块的目录，注意，不是layui的模块目录
}).use('index'); //加载入口
</script>

2、 index.js它的内容应该如下：

/**
  项目JS主入口
  以依赖layui的layer和form模块为例
**/    
layui.define(['layer', 'form'], function(exports){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
  
  exports('index', {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});

非模块化方式

如果你并不喜欢 layui 的模块化组织方式，你可以采用“一次性加载”的方式，我们将 layui.js 及所有模块单独打包合并成了一个完整的js文件，用的时候直接引入这一个文件即可。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>非模块化方式使用layui</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
 
<!-- 你的静态页面HTML代码 -->
 
<script src="../layui/layui.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello LayUI User');
}();
</script> 
</body>
</html>

非模块化用法(个人不推荐)

当你采用这样的方式时，你无需再通过 layui.use() 方法加载模块，直接使用即可，如：

<script src="../layui/layui.all.js"></script>  
<script>
;!function(){
  //无需再执行layui.use()方法加载模块，直接使用即可
  var form = layui.form
  ,layer = layui.layer;
  
  //…
}();
</script>