ant-design-vue、element框架选型对比

最新推荐文章于 2024-04-05 15:23:27 发布
最新推荐文章于 2024-04-05 15:23:27 发布
阅读量9k 收藏 21
点赞数 21
分类专栏： VUE 自定义组件 文章标签： elementui ant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47027124/article/details/119909113
版权

指标对比

ant-design-vueelement
文档地址https://www.antdv.com/docs/vue/introduce-cn/https://element.eleme.cn
团队蚂蚁金服饿了么
简介开发和服务于企业级后台产品基于vue 2.0的桌面端组件库
githubhttps://github.com/vueComponent/ant-design-vuehttps://github.com/ElemeFE/element
最新版本V2.2.6(当前使用版本：V1.7.3)V2.15.5
第一版本2018-04-20(V0.4.0)2016-11-09(V1.0.0)
star/fork15.1K/2.6K50.7K/13.k
成熟度element相对高
设计与产品sketch、生态、协作更有优势Axure
UI功能ant更全面些，参见如下具体表格对比
场景相对复杂的后台管理平台(偏逻辑)快速上手
文档文档结构以及回调参数说明有部分不明确
学习成本相对高简单
初次版本地址https://github.com/vueComponent/ant-design-vue/releases?after=0.6.1https://github.com/ElemeFE/element/releases?after=v1.1.0

具体组件功能对比

ant-design-vueelement
Button 按钮✔️✔️ (Link 文字链接)
Icon图标✔️✔️
Grid 栅格✔️✔️ (Layout 布局)
Layout布局✔️✔️ (Container 布局容器)
Space 间距✔️​
Affix 固钉✔️​
Breadcrumb 面包屑✔️✔️
Dropdown 下拉菜单✔️✔️​
Menu 导航菜单✔️✔️ (NavMenu 导航菜单)
PageHeader页头✔️✔️
Pagination 分页✔️✔️
Steps 步骤条✔️✔️
AutoComplete 自动完成✔️​
Cascader 级联选择✔️✔️
Checkbox 多选框✔️✔️
DatePicker 日期选择框✔️✔️ (DateTimePicker 日期时间选择器)
Form 表单✔️​
FormModel 表单 (支持 v-model 检验)✔️✔️
Input 输入框✔️✔️
InputNumber 数字输入框✔️✔️
Mentions 提及✔️​
Radio 单选框✔️✔️
Rate 评分✔️✔️
Select 选择器✔️✔️
Slider 滑动输入条✔️✔️
Switch 开关✔️✔️
TimePicker 时间选择框✔️✔️
Transfer 穿梭框✔️✔️
TreeSelect 树型选择控件✔️​
Upload 上传✔️✔️
Avatar 头像✔️✔️
Badge 徽标数✔️✔️
Calendar 日历✔️✔️
Card 卡片✔️✔️
Carousel 走马灯✔️✔️
Collapse 折叠面板✔️✔️
Comment 评论✔️​
Descriptions 描述列表✔️✔️
Empty 空状态✔️✔️
List 列表✔️​
Popover 气泡卡片✔️✔️
Statistic 统计数值✔️​
Table 表格✔️✔️
Tabs 标签页✔️✔️
Timeline 时间线✔️✔️
标签 Tag✔️✔️
Tooltip 文字提示✔️✔️
Tree 树形控件✔️✔️
Alert 警告提示✔️✔️
Drawer 抽屉✔️✔️
Message 全局提示✔️✔️
Modal 对话框✔️✔️ (Dialog 对话框、MessageBox 弹框)
Notification 通知提醒框✔️✔️
Popconfirm 气泡确认框✔️✔️
Progress 进度条✔️✔️
Result 结果✔️✔️
Skeleton 加载占位图/骨架屏✔️✔️
Spin 加载中✔️✔️(Loading加载)
Anchor 锚点✔️​
BackTop 回到顶部✔️✔️
ConfigProvider 全局化配置✔️​
Divider 分割线✔️✔️
LocaleProvider 国际化✔️​
Typography 字体✔️
Border 边框✔️
ColorPicker 颜色选择器✔️
Image 图片✔️
InfiniteScroll 无限滚动✔️

参考地址：https://tonightleftyou.github.io/2019/07/15/Compare_antD_with_elementUI/index.html

设计理念-非常有道理

在这里插入图片描述

  • 想快速上手，建议用elementUI；
  • 如果追求比较复杂的后台管理平台，可以考虑采用ant-design, 论表格还是表单，都是高度可配置化的。虽然稍微复杂了点，但是换来更大的便利。
    参考地址：https://tonightleftyou.github.io/2019/07/15/Compare_antD_with_elementUI/index.html
monkey01127
关注
  • 21
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
SpringBlade:SpringBlade 是一个由商业级项目升级优化而来的SpringCloud分布式微服务架构、SpringBoot单体式微服务架构并存的综合型项目，采用Java8 API重构了业务代码，完全遵循阿里巴巴编码规范。采用Spring Boot 2.4 、Spring Cloud 2020 、Mybatis 等核心技术，同时提供基于React和Vue的两个前端框架用于快速搭建企业级的SaaS多租户微服务平台
05-01
SpringBlade微服务开发平台 采用前后端分离的模式，前端开源两个框架： (基于 React、Ant Design)、 (基于 Vue、Element-UI) 后端采用SpringCloud全家桶，并同时对其基础组件做了高度的封装，单独开源出一个框架： 已推送至Maven中央库，直接引入即可，减少了工程的臃肿，也可更注重于业务开发 集成Sentinel从流量控制、熔断降级、系统负载等多个维度保护服务的稳定性。 注册中心、配置中心选型Nacos，为工程App.svelte的同时加强各模块之间的联动。 使用Traefik进行反向代理，监听后台变化自动化应用新的配置文件。 极简封装了多租户底层，用更少的代码换来拓展性更强的SaaS多租户系统。 借鉴OAuth2，实现了多终端认证系统，可控制子系统的token权限互相隔离。 借鉴Security，封装了Secure模块，采用JWT做Token
ElementUI和Ant Design对比
热门推荐
u011590754的博客
06-03 2万+
先接触了ElementUI,然后后面又接触了Ant Design，在这里做个对比，希望通过对比这两前端ui框架，能够更加深入的了解和使用这些框架。 从体验上来看： 我更加倾向于elementUI, UI上更加漂亮，使用起来更加容易上手。 一开始，我最新接触的就是elementUI，感觉elementUI这个框架更加适合于面向外部开发。 而作为对比的Ant Design，也有一定的优势。 从功能上来讲，后者更加齐全。比如回到顶部组件：树形选择：，Ant Design更加适合管理平台的开发。 从实用上来看： 总
如何评价蚂蚁的ant-design-vue UI框架
qq_43597938的博客
01-19 5840
年度UI框架 做为一名vue 忠实开发者用得最多的后台UI框架莫过于element ui element UI 由 饿了么团队维护 优势 有大厂背景 持续迭代 速度快 生态圈优异，社区活跃 社区的认可 前端程序员的青睐 Ant Design 但是当公司要求我们开发的UI框架一定要用蚂蚁的 ant -design 时，我也不以为然。以前没有用过，但是想想毕竟也是大厂的背景，应该不会差到哪里去。 当开始用到table 的模块时 问题才陆续浮出水面。 表格只要使用到 fixed 固定定位时，表格整个
Ant Design Vue
最新发布
代上老码的专栏
04-05 585
最后，Ant Design Vue致力于提供给程序员愉悦的开发体验，它的组件风格与Ant Design保持同步，组件的html结构和css样式也保持一致，真正做到了样式0修改，组件API也尽量保持了一致。Ant Design Vue 是一个非常强大且易于使用的 Vue.js 组件库，通过学习和掌握它，你可以快速构建出美观且功能强大的 Vue.js 应用。首先，Ant Design Vue采用了精良的设计风格，为用户提供了简约、美观的界面，符合现代Web应用的设计趋势，从而能够为用户提供一流的使用体验。
leetcode叫数-zhangxuan:我的在线简历
06-30
leetcode叫数 张轩 我的在线简历 个人信息 张轩/男/1993 专科/镇江高等专科大学 工作年限：5年 手机：15061690110 Email： 微信号：m18361815801 LeetCode: Github： 期望职位：PHP中高级程序员/技术经理/JavaScript前端工程师 期望薪资：16k~20k 技能清单 以下均为我熟练使用的技能 Web开发：PHP/Python/JavaScript Web框架：Yii2/ThinkPHP/Laravel/Swoft 前端框架：Vue/Element-ui/Ant-design/Lodash 前端工具：Webpack/Vue-cli 运维技能: Docker/Shell 数据库相关：MySQL/Redis 版本管理、文档和自动化部署工具：Git/Git-Workflow/Markdown 其他技能 熟悉设计模式，算法，微服务，分布式锁，消息队列 注重开发规范，开发流程和技术选型的合理性 熟悉Mysql锁机制，性能优化，索引原理，全文搜索，数据库拆分 学完《JavaScript高级程序设计》《数据结构与算法JavaScript
SpringBlade微服务开发平台-其他
06-12
SpringBlade 是一个由商业级项目升级优化而来的SpringCloud分布式微服务架构、SpringBoot单体式微服务架构并存的综合型项目，采用Java8 API重构了业务代码，完全遵循阿里巴巴编码规范。采用Spring Boot 2 、Spring Cloud Hoxton 、Mybatis 等核心技术，同时提供基于React和Vue的两个前端框架用于快速搭建企业级的SaaS多租户微服务平台。 特点： 1、采用前后端分离的模式，前端开源两个框架：Sword (基于 React、Ant Design)、Saber (基于 Vue、Element-UI) 2、后端采用SpringCloud全家桶，并同时对其基础组件做了高度的封装，单独开源出一个框架：BladeTool 3、BladeTool已推送至Maven中央库，直接引入即可，减少了工程的臃肿，也可更注重于业务开发 4、集成Sentinel从流量控制、熔断降级、系统负载等多个维度保护服务的稳定性。 5、注册中心、配置中心选型Nacos，为工程瘦身的同时加强各模块之间的联动。 6、使用Traefik进行反向代理，监听后台变化自动化应用新的配置文件。 7、极简封装了多租户底层，用更少的代码换来拓展性更强的SaaS多租户系统。 8、借鉴OAuth2，实现了多终端认证系统，可控制子系统的token权限互相隔离。 9、借鉴Security，封装了Secure模块，采用JWT做Token认证，可拓展集成Redis等细颗粒度控制方案。 10、稳定生产了两年，经历了从Camden -> Hoxton的技术架构，也经历了从fat jar -> docker -> k8s + jenkins的部署架构 11、项目分包明确，规范微服务的开发模式，使包与包之间的分工清晰。   SpringBlade 更新日志： v3.0.3 新增blade-develop的dockerfile 新增blade-develop推送docker配置 新增saber的dockerfile 新增kuboard k8s部署脚本 新增kuboard k8s部署方案 优化pom配置适配新版部署方案 优化swagger加载逻辑默认开启knife4j
Vue版AntDesignPro基于Elementui实现
08-10
Vue 版 Ant Design Pro（基于 Element-ui 实现）
elementui和Ant Design of Vue区别
qq_40572023的博客
11-03 2759
外部链接
ant design和element ui哪个组件库更容易上手
weixin_35755562的博客
02-15 2046
Ant Design 和 Element UI 都是非常流行的前端组件库，它们都有很多高质量的组件可供选择。一般来说，Ant Design 更加注重整体设计风格的一致性和美观性，而 Element UI 更注重组件的易用性和实用性。 就上手难度而言，个人认为 Element UI 可能更容易上手一些。因为它的组件文档非常详细，使用也比较直观，而且它的组件风格更加简洁，易于理解。另外，Element...
Element Plus 和 Ant Design Vue 对比测评，哪个更好？
蒋川@卡拉云
04-07 1万+
Vue 3 发布后，各家第三方库开始陆续重构并支持 Vue 3 ，国内两大知名框架 Element Plus 和 Ant Design Vue 也相续发布新版支持 Vue 3。到底应该怎么选择呢？本文从多个纬度对两个框架进行对比和测评。
Vue脚手架笔记elementui和antdesignVue（1）
weixin_46596213的博客
06-10 1063
首先我们使用elementui显示表格，并且显示数据 1、在终端输入：npm i element-ui -S，下载elementui 2、在main.js，导入elementui和样式 import ElementUI from 'element-ui'--导入 import 'element-uib/theme-chalk/index.css'--导入样式 Vue.use(ElementUI);--全局使用 3、到elementui的官网 这里我们就使用基本的表格： 箭头处可以查看代码，我们将t
基于 React、Vue + Spring Cloud 全家桶，实现的SaaS 多租户系统
04-25
采用前后端分离的模式，前端开源两个框架：Sword (基于 React、Ant Design)、Saber (基于 Vue、Element-UI) 后端采用SpringCloud全家桶，并同时对其基础组件做了高度的封装，单独开源出一个框架：BladeTool BladeTool已推送至Maven中央库，直接引入即可，减少了工程的臃肿，也可更注重于业务开发 集成Sentinel从流量控制、熔断降级、系统负载等多个维度保护服务的稳定性。 注册中心、配置中心选型Nacos，为工程瘦身的同时加强各模块之间的联动。 使用Traefik进行反向代理，监听后台变化自动化应用新的配置文件。 极简封装了多租户底层，用更少的代码换来拓展性更强的SaaS多租户系统。 借鉴OAuth2，实现了多终端认证系统，可控制子系统的token权限互相隔离。 借鉴Security，封装了Secure模块，采用JWT做Token认证，可拓展集成Redis等细颗粒度控制方案。 稳定生产了三年，经历了从 Camden -> Hoxton -> 2021 的技术架构，也经历了从fat jar -> docker -> k8s +
基于SpringBoot+Vue实现的小区物业管理系统 课程设计 大作业
03-31
基于SpringBoot+Vue实现的小区物业管理系统是为物业...前端：Vue + axios + Element-UI + vuex + Ant-Design + tinymce-vue(富文本编辑器) 1.地址说明 登录页:http://localhost:8080/ 2.账号说明 管理员：admin/123456
Saber:SpringBlade前端UI项目，对现有的avue2.0、element-ui库进行二次封装。基于json驱动的模块配置，打造最好用的vuejs中后台脚手架。官网：https
05-03
采用前后端分离的模式，前端开源两个框架： (基于 React、Ant Design)、 (基于 Vue、Element-UI) 后端采用SpringCloud全家桶，并同时对其基础组件做了高度的封装，单独开源出一个框架： 已推送至Maven中央库，直接...
Vue常用UI框架-elementUI和vant的对比
lavendersue的博客
03-04 2万+
一、vant 1、引入与使用 直接通过 CDN 引入到html页面中 <!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css"> <!-- 引入 Vue 和 Vant 的 JS 文件 --> <script src...
antD VS element
lh95lbw的博客
08-24 2844
前端 ui
ElementUI 、AntDesign 、IVIew三大组件库z-index层级管理方案对比总结
随风丶逆风的博客
09-01 2927
ElementUI elementUI将弹窗层级管理收敛到了一个入口PopupManager中，涉及zIndex层级的弹窗组件实例都需要注册到PopupManager中。源码传送门 // element/src/utils/popup/popup-manager.js import { addClass, removeClass } from 'element-ui/src/utils/dom'; // 是否有模态层 let hasModal = false; // 是否有初始zIndex let has
【Vue 开发实战】生态篇 # 23：组件库对比：Element UI、Ant Design Vue、iView
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-18 551
【Vue 开发实战】学习笔记。
Element-Ul和ant-design-vue了解
csdn740490977的博客
11-16 965
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。 开发环境 1.安装webpack npm install -g webpack 2.安装vue-cli vue-cli是什么？ vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。 使用步骤： 安装vue-cli： npm install -g vue-cli 使用vue-cli构建项目 vue init webpack project-name //创建
ant-design-vue+springboot 开源集成框架
10-04
ant-design-vue springboot开源集成框架提供了一种将ant-design-vue前端组件库与springboot后端框架集成的解决方案。ant-design-vue是一个优秀的前端UI框架，提供了丰富的组件和样式库，可以帮助开发者快速构建出美观且易于使用的用户界面。 在传统的前后端分离开发中，前端开发者需要自行选择UI框架，并通过RESTful接口与后端进行通信。而使用ant-design-vue springboot开源集成框架，可以直接使用ant-design-vue提供的组件，无需繁琐地搭建UI，同时可以通过框架提供的API与后端进行交互，简化了前后端的协作流程。 具体来说，ant-design-vue springboot开源集成框架基于springboot框架和vue.js框架，提供了一套配置文件和样板代码，用于快速搭建前后端集成项目。框架中已经集成了ant-design-vue的组件库，并提供了一些自定义的样式和组件，使得开发者可以更方便地使用ant-design-vue的组件来构建用户界面。 同时，框架还提供了一些配置选项和API，用于与后端进行通信。开发者可以通过配置选项设置后端接口的URL，然后在前端代码中直接调用框架提供的API方法来发送请求和接收响应。这样，前端与后端之间的数据传输将更加方便和高效。 总之，ant-design-vue springboot开源集成框架是一个优秀的解决方案，可以帮助开发者快速搭建出前后端集成的项目，并使用ant-design-vue提供的丰富组件来构建美观且易于使用的用户界面。有了这个框架的帮助，开发者可以更专注于业务逻辑的实现，提高开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

monkey01127

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值