UI框架 Vant、ElementUI、WeUI、AUI、LayUI_vant和element的区别

最新推荐文章于 2025-04-23 11:31:46 发布

2401_85124347

最新推荐文章于 2025-04-23 11:31:46 发布

阅读量1.2k

点赞数 23

文章标签： ui elementui layui

本文链接：https://blog.youkuaiyun.com/2401_85124347/article/details/139729719

版权

这个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>

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页