Layui 开发使用文档 / 开普饭

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

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

1. 官网首页下载你可以在我们的官网首页下载到 layui 的最新版，它经过了自动化构建，更适合用于生产环境。目录结构如下：codelayui.code├─css //css目录│ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）│ │ ├─laydate│ │ ├─layer│ │ └─layim│ └─layui.css //核心样式文件├─font //字体图标目录├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）│─lay //模块核心目录│ └─modules //各模块组件│─layui.js //基础核心库└─layui.all.js //包含layui.js和所有模块的合并文件

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

GitHub 码云

3. npm 安装codelayui.codenpm i layui-src

一般用于 WebPack 管理快速上手

获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：codelayui.code./layui/css/layui.css./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

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

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

经典，因返璞归真

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

上述的 index 即为你 /res/js/modules/ 目录下的 index.js，它的内容应该如下：codelayui.code/**项目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.all.js，它包含了 layui 所有的内置模块，且无需再通过 layui.use() 方法加载模块，直接调用即可。如：codelayui.code

Layui 开发使用文档

相关推荐