layui框架的用法
这篇文章将为大家详细讲解有关layui框架的用法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联公司主营雁山网站建设的网络公司,主营网站建设方案,成都App定制开发,雁山h5成都小程序开发搭建,雁山网站营销推广欢迎雁山等地区企业咨询
简介
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 管理
用法
1.模块化的用法(推荐)
我们推荐你遵循 layui 的模块规范建立一个入口文件,并通过 layui.use() 方式来加载该入口文件,如下所示:
上述的 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() 方法加载模块,直接使用即可,如:
但你必须知道,采用该方式,意味着 layui 的模块化已经失去了它的意义。但不可否认,它使用起来会更简单直接。
关于layui框架的用法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
当前标题:layui框架的用法
网站路径:http://scyanting.com/article/gsghsh.html