UI框架 Vant、ElementUI、WeUI、AUI、LayUI

UI框架有很多，比如微信官方为公众号开发提供的WeUI、适合后端程序员使用的Layui等。UI框架一般只是给前端狗写静态页面提供方便。

这类框架一般提供css和js文件，使用时引入css和js文件，然后html页面里使用框架规定的类名，或者说html页面里复制框架的html即可渲染出完整的html页面。不用再手工去表单、列表、样式等等，而且一般UI框架的兼容性、美观度都会比我们手写好很多。

初学时我还好奇过UI框架和JS框架的区别，JS框架比如JQuery/Vue/React等是不牵扯到html/css等样式问题的。他们本质是让我们不需要直接使用原生JS而是用他们封装后的库去更便利的开发JS。比如，JQuery使我们操作DOM，使用异步请求更方便，vue等使我们可以不再关注DOM操作，将精力更多的放在数据处理、代码优化上去。

下面分享下几个用过的UI框架：

一：Vant

Vant 是一个轻量、可靠的移动端组件库，提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。相比于AUI/weUI，Vant组件更多，基本覆盖移动端网页所有功能需求。Vant相对于weui使用起来更加方便，从html到js动态效果已经封装完毕，直接调用组件、配置即可。功能异常强大，是我们工作学习中的好帮手。

二：ElementUI

这个UI组件库，专门配合VUE使用。功能强大到可怕，借助它可快速开发管理后台。特点是

文档清晰，每个组件的每个点都有详细的实例。
组件异常完善，只有你想不到，没有人家做不到的。
组件设计简洁易用，很快上手。
用这个UI框架，就感觉自己是个工具人，对不起自己所领的薪水，人家啥都给搞定了。我们把组件拿过来拼起来就行，是我们开发速度超快。

前两年为了学习vue、ElementUI等新知识，我自己写了一个博客：孙权的博客。这个博客的管理端就用的ElementUI，没有设置账号密码，分享给大家：sunq’s blog admin

我博客的管理端用的就是ElementUI，他帮我以极快的速度就搞定了博客的管理后台。推荐大家使用这个强大的UI框架。

Element不太适用移动端，比如table、侧边导航菜单等组件也只有在管理端才会用到。但是花点心思适配也能基本达到预期，具体可以看下我的博客管理后台。

三：WeUI

WeUI与LayUI类似，但相比之下WeUI提供的内容少一些。WeUI只是提供css文件、js文件，你复制它的html代码即可渲染出一个纯静态的列表页出来。数据动态化这块，前端狗需要自己用ajax等请求数据，用模板引擎来修改纯静态页面并渲染列表页。

WeUI是一套同微信原生视觉体验一致的基础样式库,适合开发微信小程序、企业号等应用，即在微信上使用的网页。设计风格跟微信一样简洁大方。

四：AUI

aui 是一套基于原生javascript开发的移动端UI组件库，包含常用js方法、字符校验、dialog提示弹窗、数字键盘、侧滑菜单、时间选择器、多级联动、聊天UI、项目常用模板。特点是：

标准化，产品化
更多复用，更快效率
多人协作，更加统一
维护方便
易于使用
减少UI设计时间
AUI相对于weui来说更进一步，不光提供样式，使用它的方法可以直接渲染出组件了。开发移动端应用是可以参考使用，常用组件也都基本覆盖到位了。

五：LayUI

1.Layui比一般UI框架更加方便，不光为我们提供好静态页面，连数据交互这块也帮前端狗写好了。下面以Layui渲染列表为例，

1.html中引入特定css和js文件后，写一个列表最外层的div，如

2.写js代码，按LayUI提供的语法规则，新建一个table实例对象，在实例对象中将表头信息、接口地址等信息写好，打开页面即可渲染出特定样式的列表出来

LayUI官网还提供一些其用户基于LayUI写好的开源的完整系统，比如一个具有所有功能的管理后台，让一些没有设计师或者快速开发的公司，直接拿来修改使用。

但是这个框架的开发者闲心已经不再维护升级，官网已经关闭。用闲心自己的话，他让我们去拥抱变化拥抱MVVM的开发方式。他造福了中国一大堆当时从事后端但想要快速开发的人们，layui用在了无数网站上，这里向他致敬！

2. 自定义模块使用

LayUI自定义模块：

第一步：新建一个JS文件，命名为NewModule.js，代码如下

layui.define('layer',function (exports) {layer = layui.layer;  //调用已存在模板console.log("");var render = {index:function () {console.log("测试调用接口");layer.msg("好冷");}};exports('NewModule',render);    //抛出接口,加载模块时可以调用render里面的方法
});

使用自定义模块

layui.config({base: '../src/'    //自定义模块放在的位置,version: '1.0.0-beta5'}).use('NewModule',function () {var NewModule = layui.NewModule;NewModule.index();});

3.Table绑定Toolbar

html中：
<table id='ATable' lay-filter='ATable'></table>
<script type='text/html' id='Tpl'><button lay-event='play'>播放</button>
</script>
Js中：
table.render({elem:'#ATable',                         //此处的ATable为table的id值clos:[[{title:'操作',toolbar:'#Tpl'}      //此处实例化table时，绑定toolbar模板文件]]
});
table.on('tool(ATable)',function(obj){     //此处的ATable为table的lay-filter值if(obj.evenet === 'play'){             //此处监听toolbar的点击事件... ...}
});

4.跳过的坑

1.当ajax请求时只有请求头没有响应头，且提交后会刷新页面，实在找不到原因时，可能是form表单用错了。

正确的写法：
<div class="layui-form" style="padding: 30px 0 0px 0px"></div>
错误的写法：
<form class="layui-form" style="padding: 30px 0 0px 0px"></form>

PS：原生JS

我用原生JS写了一个小游戏：贪吃蛇

欢迎大家指正我的代码哈，贪吃蛇源码