Vue的三个常见组件库对比

Vue的三个常见组件库对比

随着前端组件化越来越普及，现在很多web项目或多或少都会倾向于使用组件库，有条件的公司可能会有自己团队专门针对本公司业务需求开发的组件库，这种量身定制的组件库无疑会很好的贴合公司产品。

但是，相信更多公司由于各种因素，没有专门为自己定制维护一个组件库，因此就需要使用别的公司开源的组件库。既然不是完全符合自身的，那么在组件库的选择上就有必要多考虑考虑了，因为组件库的选择将影响整个项目的开发以及业务需求的实现等等，选得好，开发起来轻松愉快，选得不好，那可能就要头皮发麻了。

那么就我了解的3个基于vue的组件库做了个比较(element、ant design of vue、vant)，看看它们各自的特点、定位以及优缺点等等。

element-ui:

element-ui是饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue2.0的PC端开源组件库(当然也有react和angular的)，已经更新了n多版本了，element-ui的定位是一款PC端的网站快速成型工具，可以满足后台应用开发也可以满足前台应用开发。

element有丰富灵活的组件、支持自定义主题以及国际化等。支持多种安装使用方式，npm或者cdn等，同时可以使用按需引入，根据功能进行了模块划分，使用了webpack进行了热重载配置，集成了测试。在丰富的文档和demo的支持下，大大降低了开发成本，提升了开发效率，缩减了维护成本。

样式比较生硬，不便于进行覆盖，以及默认样式较为简约可能是element-ui的一些缺点吧。可以说element还是目前vue组件库中非常成熟的一个，而且目前依旧由饿了么团队持续跟进维护，不用担心后续的维护问题，安安心心进行业务开发就可以了。

Ant Design of Vue:

Ant Design组件的Vue实现，Ant Design 作为一门设计语言面世，经历过多年的迭代和积累，它对 UI 的设计思想已经成为一套事实标准，受到众多前端开发者及企业的追捧和喜爱，但是以前是不支持vue的，所以以前用vue开发是享受不到Ant的优秀设计的，直到18年vue版本正式开源。

Ant Design of Vue是一款致力于为企业级中后台应用服务的UI组件库，提炼自企业级中后台产品的交互语言和视觉风格，拥有丰富的组件和优秀的设计风格，共享Ant Design of React设计工具体系，同样的支持npm和cdn等使用方式，支持按需加载，并且可以在vue-cli脚手架中使用。支持定制主题、国际化等，同时ant还提供了丰富的设计资源供下载使用，丰富详细的文档极大的降低了上手难度，提高了开发效率，优秀的交互设计和风格设计，以及专业团队的持续维护免除了用户的后顾之忧，是PC端支持 Vue的一款非常优秀的组件库。

但是，ant design of vue 在17年底才诞生，在成熟度上远不如element，因此在与vue的结合和支持上可能会有一些不足。

有赞移动端Vue组件库Vant:

Vant是有赞前端团队开发维护的一款轻量(总大小约8.8kb左右)、可靠的移动端web组件库。用于60+高质量组件，支持TS、定制主题、国际化以及SSR等。同样支持npm、cdn等引入方式，支持按需加载，测试覆盖率高达90%。

同时Vant拥有丰富的移动端商城项目demo，为开发者提供了许多设计资源，同时vant还有对应的小程序组件库，详细的开发文档和示例为开发者上手提供了极大的帮助，熟练使用移动端vant，同时也就熟练使用vant小程序组件库了，对于经常在不同平台做开发的开发者来说，Vant不失为一个优秀的移动端组件库。

但是个人感觉在一些组件的实现上还有些不足，比如图片上传组件的 disable状态。然后样式风格上没有什么特点，比较简约。