layui框架的用法

　　介绍

这篇文章将为大家详细讲解有关layui框架的用法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>简介

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

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

<强>获得layui

1。官网首页下载

下载Layui到官网:https://www.layui.com/下载到Layui的最新版,它经过了自动化构建,更适合用于生产环境。目录结构如下:

2。Git仓库下载

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

3。npm安装

npm安装layui-src

一般用于WebPack管理

<强>用法

1。模块化的用法(推荐)

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

& lt; script> 　　layui.config ({ 　　基础:& # 39;/js/模块/& # 39;//你存放新模块的目录,注意,不是layui的模块目录 　　}).use(& # 39;指数# 39;);//加载layui入口 　　& lt;/script> 　　上述的指数即为你/js/模块/目录下的index.js,它的内容如下:/* * 　　项目JS主入口 　　以依赖layui的层和形式模块为例 　　* */layui.define([& # 39;层# 39;& # 39;形式# 39;)、功能(出口){ 　　var=layui.layer层 　　,形成=layui.form; 　　layer.msg(& # 39;你好& # 39;); 　　出口(& # 39;指数# 39;,{});//注意,这里是模块输出的核心,模块名必须和使用时的模块名一致 　　});

2。非模块化用法

如果你并不喜欢layui的模块化组织方式,你完全可以毅然采用“一次性加载”的方式,我们将layui。js及所有模块单独打包合并成了一个完整的js文件,用的时候直接引入这一个文件即可。当你采用这样的方式时,你无需再通过layui.use()方法加载模块,直接使用即可,如:

& lt;脚本https://www.yisu.com/zixun/src=" . ./layui/layui.all.js "> 　　<>脚本//由于模块都一次性加载,因此不用执行layui.use()来加载对应模块,直接使用即可: 　　!函数(){//无需再执行layui.use()方法加载模块,直接使用即可 　　var=layui.form形式 　　,层=layui.layer;//? 　　}(); 　　

但你必须知道,采用该方式,意味着layui的模块化已经失去了它的意义。但不可否认,它使用起来会更简单直接。

关于layui框架的用法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

layui框架的用法