vue UI框架对比

对比维度的数据主要来源于各个框架的官网

主要对比的框架

1. element/element-plus
2. antd-vue-1.x/antd-vue-2.x
3. viewUI（之前的iView）

主要对比的维度：

1. 对vue版本的支持
2. 浏览器兼容性
3. 功能特点
4. 社区和维护
5. 是否开源
6. npm下载量stars数量

1.框架版本状态和支持的vue版本

image.png

2.浏览器兼容性

element：morden browser and IE10+
element-plus: 官网没有提到兼容性；鉴于element-ui只是为vue3提供的组件库，而vue3目前不支持IE，所以可以理解element plus的浏览器兼容性和vue3一样：不支持IE

ant-design-vue1

image.png

ant-design-vue2

image.png

viewUI：大部分组件和功能支持 IE9 及以上浏览器，部分组件和功能不支持 IE

3.功能特点

组件数量(手动在官网统计)

image.png

简单对比下三个框架的组件：

1. 三个组件库基本都包含了常用的组件
2. antd-vue比element多出组件：treeSelect 数据empty状态 list列表
3. antd的table组件比element的功能更丰富：antd有编辑 删除 筛选功能。
4. form表单，三个框架的功能也都基本一致：包含数据收集 、表单校验和提交的功能。表单常用的组件（比如input checkbox select等）三个框架都有。

4.社区和维护

1. element 和 element-plus
   饿了么团队开发和维护

社区有多个（官网提供如下）

image.png

2. ant-design-vue1和ant-design-vue2
   and-design-vue是Ant Design的Vue实现，组件的风格和Ant Design保持同步。
   是个人（作者的git账号）开发的框架，主要由作者自己维护（通过github代码贡献统计的提交数据以及官网提供的社区是作者的知乎专栏，大概率确定ant-design-vue的维护是由作者自己在做。没看到它的官网提到开发团队。）

image.png

社区：官网提供的主要是作者的知乎专栏

image.png

3. viewUI
   有自己的开发团队
   社区

   
   image.png

5.是否开源

1. element 和 ant-design-vue的都是开源免费的
2. viewUI的有些组件是付费的，比如：treeSelect tagSelect exception等组件（这些在antd和element是免费的）；也有些复杂的功能，比如登录 鉴权等组件是antd和element没有的。 收费参考view ui的收费标准。和开发团队的问题交流也采取会员收费制。

6.npm trends和git stars

image.png