Layui框架

Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui还很年轻，首个版本发布于2016年金秋，她区别于那些基于MVVM底层的UI框架，却并非逆道而行，而是信奉返璞归真之道，准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互、从这里信手拈来。

官方地址：http://www.layui.com/

你可以在官网首页下载到 Layui 的最新版，也可以通过 GitHub 得到Layui的开源包。目前我们只同步维护这两处资源渠道。一般如果你是用于实际项目，我们推荐你直接从官网下载。layui构建后的结构（也就是你获得的包）如下：

├─css //css目录    │  └─modules //模块css目录（一般如果模块相对较大，我们会单独提取）    │      ├─laydate    │      ├─layer    │      │  └─default    │      └─layim    │          └─skin    ├─font  //字体图标目录    ├─images //图片资源目录（一些表情等）    │  └─face    └─lay //JS目录        ├─dest //经过合并的完整模块        └─modules //各模块/组件

经典，因返璞归真

Layui 定义为“经典模块化”，并非是自吹她自身有多优秀，而是有意避开当下JS社区的主流方案，试图以最简单的方式去诠释高效！她的所谓经典，是在于对返璞归真的执念，她以当前浏览器普通认可的方式去组织模块！我们认为，这恰是符合当下国内绝大多数程序员从旧时代过度到未来新标准的最佳指引。所以 Layui 本身也并不是完全遵循于AMD时代，准确地说，她试图建立自己的模式，所以你会看到：

//layui模块的定义layui.define([mods], function(exports){    //……    exports('mod', api);});   //layui模块的使用layui.use(['mod1', 'mod2'], function(args){  var mod = layui.mod1;    //……  });

没错，她具备AMD的影子，又并非受限于commonjs的那些条条框框，Layui认为这种轻量的组织方式，比WebPack更符合绝大多数场景。所以她坚持采用经典模块化，也正是能让人避开工具的复杂配置，回归简单，安静高效地撸一会原生态的HTML、CSS、JavaScript。

但是 Layui 又并非是Requirejs那样的模块加载器，而是一款UI解决方案，她与Bootstrap最大的不同恰恰在于她糅合了自身对经典模块化的理解。

快速上手

获得layui后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：

./layui/css/layui.css./layui/layui.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.js"></script><script> //一般直接写在一个js文件中layui.use(['layer', 'form'], function(){  var layer = layui.layer  ,form = layui.form();    layer.msg('Hello World');});</script>   </body></html>