简介
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。
获得Layui
1. 官网首页下载
下载Layui到官网:https://www.layui.com/下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境。目录结构如下:
2. Git 仓库下载
你也可以通过GitHub或码云得到 layui 的完整开发包,以便于你进行二次开发,或者 Fork layui 为我们贡献方案
3. npm 安装
npm install layui-src
一般用于 WebPack 管理
相关推荐:《layui框架教程》
用法
1.模块化的用法(推荐)
我们推荐你遵循 layui 的模块规范建立一个入口文件,并通过 layui.use() 方式来加载该入口文件,如下所示:
<script> layui.config({ base: '/js/modules/' //你存放新模块的目录,注意,不是layui的模块目录 }).use('index'); //加载layui入口 </script> 上述的 index 即为你/js/modules/ 目录下的 index.js,它的内容如下: /** 项目JS主入口 以依赖layui的layer和form模块为例 **/ layui.define(['layer', 'form'], function(exports){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); exports('index', {}); //注意,这里是模块输出的核心,模块名必须和use时的模块名一致 });
2.非模块化用法
如果你并不喜欢 layui 的模块化组织方式,你完全可以毅然采用“一次性加载”的方式,我们将 layui.js 及所有模块单独打包合并成了一个完整的js文件,用的时候直接引入这一个文件即可。当你采用这样的方式时,你无需再通过 layui.use() 方法加载模块,直接使用即可,如:
<script src="../layui/layui.all.js"></script> <script> //由于模块都一次性加载,因此不用执行 layui.use() 来加载对应模块,直接使用即可: !function(){ //无需再执行layui.use()方法加载模块,直接使用即可 var form = layui.form ,layer = layui.layer; //… }(); </script>
但你必须知道,采用该方式,意味着 layui 的模块化已经失去了它的意义。但不可否认,它使用起来会更简单直接。
以上是layui框架是什么的详细内容。更多信息请关注PHP中文网其他相关文章!