layuit 框架_UI框架Layui入门介绍

Layui(谐音，类UI)，一款为服务端程序员量身定做的UI框架，采用原生的HTML/CSS/JS编写，体积轻盈，内容丰富。使用Layui后，一次性解决弹出层、日期插件、数据分页、表格、文件上传等常用模块。除此之外，layui兼容除IE6/7外的所有浏览器，可作为 PC端后台系统和前台界面的快速开发方案。

下载layui的三种方法

方法1:官网下载:https://www.layui.com/,解压后，文件夹结构如下：

├─css //css目录

│ │─modules //模块css目录(一般如果模块相对较大，我们会单独提取，比如下面三个：)

│ │ ├─laydate

│ │ ├─layer

│ │ └─code.css

│ └─layui.css //核心样式文件

├─font //字体图标目录

├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)

│─lay //模块核心目录

│ └─modules //各模块组件

│─layui.js //基础核心库

└─layui.all.js //包含layui.js和所有模块的合并文件

方法3：npm下载，下载命令为 npm i layui-src，不知道npm的同学可参考：到底什么是npm

Layui的两种加载方法

方法1：按模块加载layui.css+layui.js，适用于线下开发环境，方便团队调试代码。

单模块加载

;!function(){

//layui.use()加载模块

layui.use(['layer','form'],function(){

var layer=layui.layer;

layer.open({

title: '模块化加载'

,content: 'hello,layui'

});

});

}();

方法2：全模块加载layui.css+layui.all.js，适用于线上环境，介绍请求静态资源的次数。

全模块加载

// 无需再执行layui.use()方法加载模块，直接使用即可

;!function(){

var layer=layui.layer,form=layui.form;

layer.open({

title:"全模块加载",

content:"hello,layui"

});

}();

以上就是layui入门介绍的全部知识，在之后的文章中还会介绍如何使用开发中常用的表单模块、文件上传模块、分页模块等。