设计风格
Vuetify是基于Material Design规范,依靠Material Design的设计优势,在无需编写一行css代码就可以得到非常美观的界面功能,同时Vuetify还具备自适应的能力,可以使用一套代码写出同时兼容手机、平板、web的功能;
Element Plus 是基于Flat Design设计风格;Flat Design强调简洁、扁平化的设计形式,注重图形的表现力,形式简单,主打pc端;
Ant Design Vue则是基于Ant Design风格,主打pc端。
基础组件
从源码components/index 下查看
Vuetify 提供了93个组件,但有17个组件还在开发中,日期组件暂时没有上线的
Element Plus提供了71个组件,6个plugins
Ant Design Vue提供了超过70个组件。
社区
Vuetify Contributions 大多数为外国友人,国内的技术博客上拥有的文章、教程和解决方案等相对较少,且文档为英文,翻译的中文文档部分解释有误;虽然官方文档相对清晰,但与国人的思维不同,学习成本相当于其他组件库来说较高;Vuetify 3的官网示例还是以vue2的语法去编写的。
Element Plus 和 Ant Design Vue Contributions 大多数为国内友人,拥有的文档、教程和解决方案等相对较多,上手比较快。
扩展性
Vuetify 对于自定义和扩展都提供了丰富的插件机制,可以通过创建自己的插件来添加新的组件、指令和自定义主题。
据我了解 Element Plus 没有提供类似的功能,如果需要进行自定义和扩展,可能需要修改源码。
试用 Vuetify 组件库
VTable 基础组件写的比较简单,可扩展性较强,官方也在VTable的基础上扩展了VDataTable组件,功能比较丰富,也可基于VTable 进行二次封装;
VForm 组件没有像Element Plus封装 FormItem,在form层面把rules做掉,而是把 rules 正则验证下放到内部使用的组件上,比如select input等基础组件上有加rules;
总结
Vuetify上手难度相对于国内的组件库来说会大一些,但是扩展性更好,比较适用于大型、复杂、定制化需求较高的项目中;可以以Vuetify为主(基础),Element Plus为辅,搭建属于我们自己的组件库,也可以通过Verdaccio把组件库部署在我们的服务器上。
https://vuetifyjs.com/en/