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 管理

用法

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前端框架是什么”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!