开始使用

Layui 出蛋于2016年金秋，是一款带着浓烈情怀的国产前端UI框架，她追求极简，又不失丰盈的内在，说她是史上最轻量的结晶，似乎并不为过。一切都源自于她对原生态的执着，对前端社区的那些噪杂声音的过滤，以及她本身的精心雕琢。

Layui兼容除IE6/7以外的全部浏览器，并且绝大多数结构支持响应式
获得 Layui

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

codelayui.code
  1.     ├─css //css目录
  2.     │  └─modules //模块css目录（一般如果模块相对较大，我们会单独提取）
  3.     │      ├─laydate
  4.     │      ├─layer
  5.     │      │  └─default
  6.     │      └─layim
  7.     │          └─skin
  8.     ├─font  //字体图标目录
  9.     ├─images //图片资源目录（一些表情等）
  10.     │  └─face
  11.     └─lay //JS目录
  12.         ├─dest //经过合并的完整模块
  13.         ├─lib //部分组件依赖到的第三方库（目前只有jquery）
  14.         └─modules //各模块/组件
  15.

你还可以在GitHub 上 Fork Layui为我们贡献方案

经典，因返璞归真

近几年，尤其是今年，常常会听到猿们吐槽“现在想简简单单的写个前端怎么就变得这么难呢？”。的确，前端目前正处于一个超出常理，且疯狂造轮子的黄金时代，标准化的逐步设想与浏览器本身的现状所形成的滞后感，让一些尚未得到官方推广的方案开始引领着前端社区，那仿佛是一场“五代十国”般的颠覆，这期间，你看不到一个所谓的新鲜轮子可以维持超过三年的光环，因为它很快就会被另一个新轮子所替代。你必须保持对技术的高度狂热，透过未来的加锁去追逐那些层出不穷的，工具！是的，他们只是工具，准确地说是一种标准化最终形成的过度！

透过那些高逼格工具的本质，最终仍然是 HTML、CSS、JavaScript 三驾马车的真实面貌。与工具不同的是，它们是最终标准的归属者。所以工具在发展，三驾马车本身同样也在高速发展，那既然如此，我们为何不能跟随原生态的稳健脚步，安安静静地撸会码呢？

Layui 定义为“经典模块化”，并非是自吹她自身有多优秀，而是绕开JS社区的喧嚣，以最简单的方式去诠释高效！她的所谓经典，是在于对返璞归真的执念，她以当前浏览器普通认可的方式去组织模块！我们认为，这恰是符合当下国内绝大多数程序员从旧时代过度到未来新标准的最佳指引。

所以 Layui 本身也并不是完全遵循于AMD时代，准确地说，她试图建立自己的模式，所以你会看到：

codelayui.code
  1. //layui模块的定义
  2. layui.define([mods], function(exports){
  3.   
  4.   //……
  5.   
  6.   exports('mod', api);
  7. });  
  8.  
  9. //layui模块的使用
  10. layui.use(['mod1', 'mod2'], function(args){
  11.   var mod = layui.mod1;
  12.   
  13.   //……
  14.   
  15. });    
  16.

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

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

快速上手

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

codelayui.code
  1. ./layui/css/layui.css
  2. ./layui/layui.js
  3.

没错，不用去管其它任何文件。因为他们（比如各模块）都是在最终使用的时候才会自动加载。这是一个基本的入门页面：

codelayui.code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.   <title>开始使用Layui</title>
  7.   <link rel="stylesheet" href="../layui/css/layui.css">
  8. </head>
  9. <body>
  10.  
  11. <!-- 你的HTML代码 -->
  12.  
  13. <script src="../layui/layui.js"></script>
  14. <script>
  15.  
  16. //一般直接写在一个js文件中
  17. layui.use(['layer', 'form'], function(){
  18.   var layer = layui.layer
  19.   ,form = layui.form();
  20.   
  21.   layer.msg('Hello World');
  22. });
  23. </script> 
  24.   
  25. </body>
  26. </html>
  27.
规范化的用法（推荐）

如果你想快速使用Layui的组件，你还是跟平时一样script标签引入你的js文件，然后在你的js文件中使用layui的组件。但我们更推荐你遵循Layui的模块规范，建立一个自己的模块作为入口：

codelayui.code
  1. <script>
  2. layui.config({
  3.   base: '/res/js/modules/' //你的模块目录
  4. }).use('index'); //加载入口
  5. </script>    
  6.
上述的 index 即为你 /res/js/modules/ 目录下的 index.js，它的内容应该如下： 
codelayui.code
  1. /**
  2.   项目JS主入口
  3.   以依赖Layui的layer和form模块为例
  4. **/    
  5. layui.define(['layer', 'form'], function(exports){
  6.   var layer = layui.layer
  7.   ,form = layui.form();
  8.   
  9.   layer.msg('Hello World');
  10.   
  11.   exports('index', {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
  12. });    
  13.
简单粗暴用法（不推荐）

如果你觉得Layui的模块化还是有点啰嗦，木有关系的亲。Layui考虑到了像你一样的猿群，我们将所有模块单独打包合并成了一个完整的js文件，用的时候直接引入它即可：

codelayui.code
  1. <script src="../layui/layui.js"></script
  2. <script src="../layui/lay/dest/layui.all.js"></script>      
  3.

当你采用这样的方式，你将不用去管layui.use啊、异步、回调啊什么的，你只需要直接用，譬如：

codelayui.code
  1. <script src="../layui/layui.js"></script
  2. <script src="../layui/lay/dest/layui.all.js"></script>  
  3. <script>
  4. ;!function(){
  5.   var from = layui.form()
  6.   ,layer = layui.layer;
  7.   
  8.   //…
  9. }();
  10. </script> 
  11.

但你必须知道，这种使用方式，意味着Layui的模块化已经失去了它的意义。但不可否认，它比什么都来的简单。

好了，不管你采用什么样的方式，从现在开始，尽情地使用Layui吧！但愿这是一段美妙的旅程。

Layui - 用心与你沟通

2016 © layui.com LGPL license

捐赠作者 商务合作 Git仓库 微博 微信公众号