layui经典模块化前端UI框架初识

layui产生背景

layui相对于vue来说确实稍有逊色，但是官网提供的入门文档以及完善的框架结构，使的很多人开始用layui来开发前端页面，那么什么人会去使用layui呢？

1. 针对后端开发人员，在对前端知之甚少的情况下需要自行开发前端页面
2. 前后端数据动态交互要求较低的前端开发工程师
3. 测试开发工程师

layui使用入门

首先我们来认识一下layui

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

layui官网直达链接：www.layui.com/ layui前面的使用方法在官网文档中以及提及了，那么这里主要从另外一个层面去使用layui，layui官网首页下载的源码内容如下：

基本有点前端基础知识的开发工程师应该从图中可以看出，layui源码下文件目录基本以及做好了分类，生成了基本的文件目录css、js、font、images以及第三方组件lay目录。那么我们开发的时候可以在上级目录的同级目录新增templates目录，使的整个前端项目相似于独立开发结构，如图：

temlates目录主要是放一些html文件内容，适配django+flask（我的后端语言是python）。在开发的构成中首先我们的知道layui为什么会如此的方便，开发layui的作者将layui的什么功能引以为豪呢？先看一下百度layui的呈现界面，此界面的展示内容可以作为layui的精髓内容：

从展示页面来看主要提及到如下功能：

1. layui文档
2. 后台模板
3. layui在线
4. layui插件
5. layui教程
6. 网页聊天

layui文档和教程这个不过多说明，官网入门文档就是；来看一下后台模板，layui提供了一个基本的后台管理界面的主页布局和导航源码，我们使用的时候基本傻瓜式套用即可，直达地址www.layui.com/admin/ 单页版方案演示界面如下

特别需要注意的是layui的后台模板是需要收费的，当然我也支持大家付费进行使用，只是但凡成人总有富贵贫穷之分，这里如果不是非常富裕的建议使用基于layui开发的后台模板xadmin，直达地址： x.xuebingsi.com 官方给我们提供的layui在线，这个功能对于前端开发来说起到了很大的辅助作用。直达地址：www.layui.com/demo/页面展示效果

layui官网中提供了很多的组件比较出名的就是layer、laydate、layim.

其实layui还有一个引以为豪的地方，只是这个功能由大家进行维护，这就是layui社区直达地址fly.layui.com/，在社区里面有很多在开发过程中遇到的疑难问题解决方案。