layui框架是什么(Layui简单使用总结)-风君雪科技博客

简介

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框架是什么的详细内容,更多请关注风君子博客其它相关文章!