开始使用 - 入门指南

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

开始使用 Getting Started - 图1

兼容性和面向场景

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

获得 layui

1. 官网首页下载

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

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

2. Git 仓库下载

你也可以通过 GitHub 或 码云 得到 layui 的完整开发包，以便于你进行二次开发，或者 Fork layui 为我们贡献方案

GitHub 码云

3. npm 安装

  1.  
  2. npm i layui-src   
  3.

一般用于 WebPack 管理

快速上手

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

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

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

  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. //一般直接写在一个js文件中
  16. layui.use(['layer', 'form'], function(){
  17.   var layer = layui.layer
  18.   ,form = layui.form;
  19.  
  20.   layer.msg('Hello World');
  21. });
  22. </script> 
  23. </body>
  24. </html>
  25.

如果你想采用非模块化方式（即所有模块一次性加载，尽管我们并不推荐你这么做），你也可以按照下面的方式使用：

  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.all.js"></script>
  14. <script>
  15. //由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
  16. ;!function(){
  17.   var layer = layui.layer
  18.   ,form = layui.form;
  19.  
  20.   layer.msg('Hello World');
  21. }();
  22. </script> 
  23. </body>
  24. </html>
  25.

经典，因返璞归真

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

  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 糅合了自身对经典模块化的理解。

模块化的用法（一般用于开发环境）

我们推荐你遵循 layui 的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件，如下所示：

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

上述的 index 即为你 /res/js/modules/ 目录下的 index.js，它的内容应该如下：

  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.all.js，它包含了 layui 所有的内置模块，且无需再通过 layui.use() 方法加载模块，直接调用即可。如：

  1. <script src="../layui/layui.all.js"></script>  
  2. <script>
  3. ;!function(){
  4.   //无需再执行layui.use()方法加载模块，直接使用即可
  5.   var form = layui.form
  6.   ,layer = layui.layer;
  7.  
  8.   //…
  9. }();
  10. </script> 
  11.

除了 layui 内置的全模块加载，layui 的扩展模块同样可以合并为一个文件来加载。我们假设你的项目存放了很多个扩展模块（可以简单理解为一个 js 文件就是一个模块），那么你只需要根据其依赖关系将其合并，即可一次性加载所有扩展模块，如：

  1. //mod1.js
  2. layui.define('layer', function(exports){
  3.   //…
  4.   exports(mod1, {});
  5. });
  6.  
  7. //mod2.js，假设依赖 mod1 和 form
  8. layui.define(['mod1', 'form'], function(exports){
  9.   //…
  10.   exports(mod2, {});
  11. });  
  12.  
  13. //mod3.js
  14. //… 
  15.  
  16. //main.js 主入口模块
  17. layui.define('mod2', function(exports){
  18.   //…
  19.   exports('main', {});
  20. });
  21.

现在我们可以借助 Gulp 将上述的 mod1、mod2、mod3、main 等扩展模块构建合并到一个模块文件：main，此时你只需要加载它即可：

  1. <script src="../layui/layui.all.js"></script>  
  2. <script>
  3. layui.config({
  4.   base: '../js/' //你的扩展模块所在目录
  5. }).use('main'); //这里的 main 模块包含了 mod1、mod2、mod3 等等扩展模块
  6. }();
  7. </script> 
  8.

可以看到，通过「全模块」的用法，我们最多只需要加载两个 JS 文件，这将大幅度减少静态资源的请求。

通过上面的阅读，也许你已经大致了解如何使用 layui 了，但真正用于项目远不止如此，你需要继续阅读后面的文档，尤其是「基础说明」。
那么，从现在开始，尽情地拥抱 layui 吧！但愿她能成为你长远的开发伴侣，化作你方寸屏幕前的亿万字节！

layui - 用心与你沟通