Element Plus 和 Ant Design Vue 对比测评,哪个更好?

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年08月29日

Element Plus 和 Ant Design Vue 对比测评,哪个更好?

Vue 3 发布后,各家第三方库开始陆续重构并支持 Vue 3 ,国内两大知名框架 Element Plus 和 Ant Design Vue 也相续发布新版支持 Vue 3。到底应该怎么选择呢?本文从多个纬度对两个框架进行对比和测评。

element-plus-vs-ant-design-vue

Element Plus 发布正式版后,下载量飙升,当然这也依托于 Element UI 的占有率和好口碑。有关 Element Plus 的测评可看这篇:《Element Plus for Vue 3 怎么样?评价如何

框架版本对 Vue 的支持

  • Element UI 支持 Vue 2
  • Element Plus 支持 Vue 3
  • Ant Design Vue 1.x 支持 Vue 2
  • Ant Design Vue 3.x 支持 Vue 3

Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级,对于第三方组件库来说是一件好事,那些已经修修补补无数次,还无法彻底解决的问题,在这次面向 Vue 3.0 重构时,一次性全部解决。

Ant Design Vue 1.x 仅支持 Vue 2 ,2.x 是为了 Vue 3 开发的兼容版,并没有任何新特性,大多数的 API 也只是为了更好的兼容 Vue 3 ,3.x 版在易用性、功能、性能上都有了很大的提升,可以说是对 Vue 3 比较成熟支持的版本了。

浏览器兼容性

Element Plus 和 Ant Design Vue 3 都已不在支持 IE 了,并不是他们自己放弃了 IE 而是 Vue 3 本身已经放弃了 IE。如果想在低版本浏览器上正常使用这两个框架,可使用 Babel、ESBuild 或其他转换工具,并引入相应的 polyfill。

Element Plus 使用到了 ResizeObserver,如有兼容性需求可自行引入 resize-observer-polyfill。详情请参阅 ResizeObserver 的兼容性

组件功能与特点

Element Plus 共 68 个组件,Ant Design Vue 3.x 共 64 个组件。

  • table 组件:Element Plus 自带 virtual scroll ,Ant Design Vue 需要购买 Surely 这个高级包。如果需要用表格处理大量数据,Element Plus 更合适。Ant Design table ,定义好 columns 有几列后,用 template 写法就无法用 v-if 去隐藏某一列
  • 在 Ant Design Vue 里,Modal.confirm 某些 api 不支持 promise 写法,需要写在回调函数里
  • TreeSelect 组件:Ant Design tree 组件写自定义内容不方便。而 Element 更好用。
  • form 表单组件:两个框架功能基本一致,包含数据收集,表单校验和提交功能。inputcheckboxselect 等常用功能两个框架都有。
  • Ant Design Vue 2 & 3 是最早支持 Vue 3 的框架之一,新版本解决了很多 Vue 用户群在旧版本不喜欢的「单向数据流 value + change event」,实现了全 v-model 使用组件。

维护状态

Element Plus 与 Element UI 一样依然是饿了么团队开发支持和维护。前段时间传闻 Element UI 无人维护,不更新了。其实只是团队在全力开发 Element Plus 而已。Element 团队的迭代速度有目共睹,可放心使用。

Ant Design Vue 是 Ant Design的 Vue 实现,UI 风格和 Ant Design 保持 1:1 复刻。Ant Design Vue 虽然是以个人开发开始起步的,算是社区版,但它得到了蚂蚁官方认可,挂在蚂蚁金服底下的正式项目,保持了不错的更新和维护状态。

Element Plus、Ant Design Vue 与卡拉云对比

Element Plus 与 Ant Design Vue 都是 Vue 3 的一个组件库,所以使用 Element 和 antdv 首先要搭 Vue 3 开发环境,然后再引入组件库,再按照文档的说明,根据自己的需求进行二次开发。使用 Element 和 antdv 相对来说对前端技能要求较高。

新一代低代码开发工具「卡拉云」全面解决前后端开发繁杂,避免重复造轮子的问题。开发者无需懂前后端,只需要拖拽前端组件,填表进入数据库 / API ,帮你解决前后端全栈问题, 1 小时快速开发后台管理系统。

(1)卡拉云是什么?

卡拉云是新一代企业级低代码开发平台,与Element UI 、 iView UI 不同,几乎不用写代码,开箱即用。卡拉云把后台管理系统抽象成三个部分:「前端组件」+「后端数据源」+「连接组件与数据源的简单代码」,开发者不需要写复杂的代码,甚至可以不懂前端开发,也可以快速搭建「CRM、ERP、CMS、MES 」等后台管理工具。

在卡拉云搭建后台管理工具时,前端只需要拖拽即可生成组件,复杂的表格、多样的图表、繁琐的表单、功能强大的富文本编辑器等常用的前端组件,卡拉云都已经帮开发者 Set 好了;后端也无需开发者操心,简单填写配置表,即可接入MySQL、SQL Server 等常见的数据库 和 Restful API 、飞书、小程序、企业微信等数据源。开发者只需要专注业务逻辑的开发,其他一切卡拉云全部帮开发者处理好,是真正意义的低代码开发平台。

kalacloud

(2)卡拉云怎么样,评价如何?

只要使用过卡拉云的开发者都能体会到它的绝妙。在卡拉云接上数据源,拖拽一个组件,把他们连起来,这一刻,任何人都会眼前一亮,感叹怎么能有这么好用的开发工具!

kalacloud-ui.jpg

卡拉云把后台管理系统抽象成「前端组件」+「后端数据源」+「连接组件与数据源的简单代码」三个部分。

「前端组件」部分,开发者甚至不需要懂前端,直接拖拽,即可生成前端组件。卡拉云内置了几乎所有常见的前端组件,特别是比较复杂的表格、表单、图表、富文本、查询等,这些组件卡拉云已经调校的非常出色,开发者无需自己调试,接上数据即可使用。

kalacloud-sql-api

「后端数据」部分,开发者不需要自己搭建后端,直接填个配置表就可以连上常见的数据库(MySQL、SQL Server 等)、API(钉钉、飞书、企业微信等开放 API 的工具均可连接),帮助企业打通信息孤岛,用卡拉云把所有数据连接起来,集中处理。

01-kalacloud-table.gif

「组件与数据的关联」部分,开发者只需要会简单的 JS / SQL 用一行代码就能在前端把后端数据和组件关联起来,如此简单却又不损失搭建的灵活性是卡拉云最神奇的地方。

卡拉云与其他前端框架不同,最大的不同是开发策略不同,多数快速开发平台采用开源的市场策略,依靠开发者自愿贡献,同时提供服务而盈利。而卡拉云则是采用成本较高的自研策略,努力保证高可用性和高安全性。当然,两种策略各有优势,选择开源的快速开发平台,适合喜欢自己亲力亲为的用户,卡拉云适合不想处理任何技术细节,只想安全高效的把业务系统搭出来,快速交付使用的企业级用户。

扩展阅读: