基于Vue前端UI框架比较

1. Vue3相对于vue2的优缺点

优点:

1. 性能提升，主要体现在打包体积（减少了40%左右），渲染速度（快了55%），更新速度（100%）及内存使用（减少了50%）几方面。
2. 由于增加了composition api，更加支持Ts，使得代码相对于Vue2更利于维护。

缺点：

就目前来说用户数量和社区活跃度没有vue2高，有一定的学习成本（包括学习ts）

各个UI框架的比较

根据目前市场常用的框架进行初步筛选，入选了4款框架，分别为element-ui, ant-design-vue, View UI,vuetify  。以下将对着4款框架进行多个维度的比较。

一个专业的开发团队对于一款产品来说至关重要。

开发团队:

Element: 饿了么开发团队。

ant-design-vue: 阿里（但是根据提交纪录，基本还是原作者唐金州在维护）

View UI:北京视图更新科技有限公司

Vuetify: Vuetify公司（国外）

github上的Star数量也在一定程度上反映了市场的占有率

Star数量

Element: 50.8K。

ant-design-vue: 15.2K

View UI: 25.3K   i View (23.9K)   + View Ui(2.4K)

Vuetify: 32K

对浏览器的兼容性问题也是衡量框架适用性的重要指标

浏览器兼容性

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

ant-design-vue：morden browser and IE11+

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

Vuetify: ie11+及safari10+

保持框架的持续更新对于框架的使用寿命来说是至关重要的

最后更新时间

Element：2021-09-02

ant-design-vue：2021-08-27

View UI：2021-06-13

Vuetify: May 2021

屏幕自适应

Vuetify是其中做的最好的一个

组件对比

 四个组件库基本都包含了常用的组件，可能再具体功能上有些许不同，View UI有部分组件需要付费使用

下面以后台系统中使用频率最高的数据表格组件举例子

Element:

上手最简单 常见需求都能满足

Antdesign Vue:

 

文档最详细，提供的方法也是最多的，特别是在对复杂表格的处理上，例如可编辑表格等

View UI

个人感觉和element类似，ui较为简洁

vuetify

   页面风格和其他的几个有所不同

总结：

优点

Element Ui：社区活跃度高，更新频率快，上手也容易

Antdesign of vue: 对于复杂表格的处理较好，用过antdesign的开发者使用这个会感到很容易

viewUi: UI风格,api使用简介明了，文档也较为详细

Vuetify：开发者几乎不需要写css代码，基于Material Design开发。屏幕自适应能力好

缺点：

Element Ui：对一些复杂的组件支持上欠缺

Antdesign of vue：除去数据表格及级联下拉框等特定组件，其余组件使用没有其他组件简单

viewUi:部分组件开始收费，github提问解答较慢

Vuetify: 国外团队开发，页面风格与其他几个不同。