搜索
首页web前端Layui教程layui框架是什么

layui框架是什么

Jul 11, 2019 pm 01:22 PM
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: &#39;/js/modules/&#39; //你存放新模块的目录,注意,不是layui的模块目录
}).use(&#39;index&#39;); //加载layui入口
</script>    
上述的 index 即为你/js/modules/ 目录下的 index.js,它的内容如下:
/**
项目JS主入口
以依赖layui的layer和form模块为例
**/
layui.define([&#39;layer&#39;, &#39;form&#39;], function(exports){
var layer = layui.layer
,form = layui.form;
layer.msg(&#39;Hello World&#39;);
exports(&#39;index&#39;, {}); //注意,这里是模块输出的核心,模块名必须和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中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。