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

layui产生背景

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

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

layui使用入门

首先我们来认识一下layui

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

layui官网直达链接:https://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提供了一个基本的后台管理界面的主页布局和导航源码,我们使用的时候基本傻瓜式套用即可,直达地址https://www.layui.com/admin/
单页版方案演示界面如下


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


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


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

原文地址:https://www.cnblogs.com/pujenyuan/p/12694252.html

时间: 2024-10-06 08:17:05

layui经典模块化前端UI框架初识的相关文章

推荐几个精致的web UI框架及常用前端UI框架

以下是几个精致的web UI框架 1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. gitHub地址:https://github.com/aliceui/aliceui.github.io 2.Amazeui Amaze UI 是一个轻量级. Mobile first 的前端框架, 基于开源社区流行前端框架编写的. 官网地址:http://amazeu

web前端ui框架好用的有哪几个

如今移动端网站越来越火热,移动端的网站也纷纷崛地而起,在进行web前端开发(http://www.maiziedu.com/course/web/)时,需要用到适合自己项目的框架就需要有偶遇的机会,特别是适合移动端的web前端框架,很难遇得到,下面小编就推荐几款合适的移动web 前端ui框架给大家,能大大提升我们的开发效率. Amaze UI Amaze UI是一个轻量级(所有CSS和JS gzip后100kB左右).Mobile first的前端框架, 基于开源社区流行前端框架编写. Froz

【转载】目前最受欢迎的WEB前端UI框架

目前WEB前端UI框架受到新人追捧,下边为大家列出目前最受欢迎.最优秀的前端框架以供大家选择一款适合自己的! Bootstrap 目前开源社区最受欢迎的项目之一,可谓大名鼎鼎了,最新版本3.x兼容IE9+ 官网:http://getbootstrap.com/ Foundation 属于WEB前端框架的先驱者,知名度被Bootstrap反超,但其优秀程度相比Bootstrap只强不弱!最新版本5.x兼容IE9+ 官网:http://foundation.zurb.com/ Semantic UI

前端UI框架技术选型

需求 为了重构应用开发平台的前端,对目前的UI框架技术进行调研,有以下的标准: 1 要有丰富的控件以便支持大多数的mis系统的需求,如tree/table等 2 轻量不复杂,学习成本少 3 有统一的界面风格与调用接口 4 方便扩展 5 文档丰富 6 社区活跃 UI框架调研 复杂度 开发模式 开源 收费 组件 稳定性 扩展性 性能 兼容性问题 调试 学习成本 可读性 文档 社区 extjs 高/重量 桌面应用/js Y Y 很丰富 高 好/复杂 慢 一点 难 高 差 丰富 活跃 easyui 轻量

前端UI框架简单对比和选型建议

Bootstrap3.3.4的后台主题UI框架H+ v3.0 http://www.zi-han.net/developer/1031.html   (组件多而全,但收费) 拼图响应式前端框架 http://demo.pintuer.com/pintuer3/ (响应式,组件多而全) Semantic UI 和 amazeui http://www.semantic-ui.cn/ http://amazeui.org/ (响应式,跨浏览器,组件多而全,活跃性一般) x5应用快速开发 框架 htt

关于移动App开发前端UI框架选择

问题:现在移动开发各种必须,而移动开发纠结在于怎样快速高效的开发出来. 做web开发有些年头了,成熟的前端套件(easyui,extjs,jqueryui)很是方便,可以开发出来规范一直的产品,各种组件也是很完整的,不用单独找日期控件或者验证控件等等. 毕竟不是做美工的,要知道做出来一直的产品是很重要的.现在后端技术无可厚非的成熟了,所有的开发都集中到了全端UI上面. 移动端有几个参考呢? 1.jquery mobile jquery内核的朋友上手很快的,毕竟是jquery的产品. 缺点是笨,性

可以500%提高开发效率的前端UI框架!QUI!

QUI 框架介绍 QUI网页界面集成框架是一套完整的企业级前端解决方案,由组件库.皮肤框架.示例工程和文档4部分组成.使用本产品开发者可以极大地减少工作量,提高开发效率,快速构建功能强大.美观.兼容的应用系统. QUI框架特点如下: 特点一: 组件使用方式极大简化和一致性 几乎所有组件都可以通过一句标签实现创建.无需任何JS代码. 例如: 其中,class设置为selectTree声明它是一个树形下拉框,url里的路径用于从远程获取JSON数据. 效果如下: 其他设置通过添加属性实现,例如添加m

介绍三款大前端UI框架

一.蚂蚁金服团队推出的基于React antd (全名:ant.design) 友情跳链:https://ant.design/index-cn:使用antd模板:https://pro.ant.design/ (基于react) 优点: 不言而喻,阿里的蚂蚁金服团队,在前端组件UI上是下足了功底,喜欢开箱即用的可以直接使用,当然该组件不仅仅局限于使用react,同时你可以选用Vue与angular版本去搭配使用. 技术文档:VUE+antd  :  https://vue.ant.design

常用vue前端UI框架

Element(Star-43.7k) 网站快速成型工具 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 官网地址 https://element.eleme.cn/#/zh-CN iview(Star-23k) View UI,即原先的 iView,是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 官网地址 https://iviewui.com/ vuetify(Star-23.7k) 一个为 Vue JS 2.0