Vue UI库

2022年6月14日 · 阅读需 4 分钟

做 Vue 项目时，选 UI 组件库往往是动手前的第一个决定：选对了能省下大量按钮、表单、弹窗的重复劳动，选错了后期换库的成本相当高。这里把我平时接触到的几个常见 Vue UI 库整理一下，记录各自的定位和印象，方便以后选型时翻回来看。

先说一下选型时我一般关注的几点：组件覆盖面是否够用（表格、表单、日期选择这些高频组件的完成度）、文档和社区是否活跃、设计风格是否贴合产品定位，以及项目是否还在持续维护。下面按这个视角逐个过一遍。

View Design

基于 Vue.js 3 的企业级 UI 组件库和前端解决方案，为数万开发者服务。

它的前身是 iView，在 Vue 2 时代就积累了不少用户，风格偏简洁的后台管理系统路线。除了组件库本身，官方还提供了配套的模板和工具，适合想要一整套后台方案而不只是零散组件的场景。

基于 Vue 3，面向设计师和开发者的组件库。

Element 系列大概是国内 Vue 项目里出现频率最高的组件库，Vue 3 对应的版本叫 Element Plus。它的优势在于中文文档完善、组件齐全、社区大，遇到问题基本都能搜到现成答案。做中后台系统时，它几乎是默认选项之一。

Vuetify是一个Vue UI库，具有精美的手工制作的材质组件。无需任何设计技能 — 创建出色应用程序所需的一切触手可及。

它严格遵循 Google 的 Material Design 规范，视觉风格统一且带有明显的 Material 特征。如果产品本身就打算走 Material 风格，或者面向海外用户，Vuetify 会比国内几个库更合适；反过来，如果想大幅定制成自己的视觉体系，改起来会比较费劲。

遵循 Ant Design 规范，开发了一个 Vue UI 库，其中包含一组用于构建丰富的交互式用户界面的高质量组件和演示。

Ant Design 本身是蚂蚁团队为 React 生态制定的设计体系，Ant Design Vue 是它在 Vue 侧的实现。好处是设计规范经过大量中后台产品验证，表格、表单这类复杂组件功能很全；如果团队里同时有 React 和 Vue 项目，用同一套设计语言也能降低沟通成本。

样式动画很好，可惜已经停止维护。

Vuesax 的组件在配色和交互动画上确实比上面几家更活泼，适合视觉要求偏年轻化的项目。但停止维护意味着新版本 Vue 的兼容、bug 修复都没有保障，新项目不建议再选它，这里列出来主要是当个参考。

1）维护状态要先查。像 Vuesax 这样停止维护的库，装进新项目就是给未来埋雷，选型前先看仓库的提交记录和 issue 响应情况。

2）Vue 2 和 Vue 3 的版本要分清。这几个库大多经历过 Vue 2 到 Vue 3 的迁移，包名和文档往往是两套（比如 Element UI 和 Element Plus），装错版本会直接跑不起来。

3）按需引入。UI 库整包体积都不小，正式项目里建议配置按需加载，只打包用到的组件。

提示

如果只是写 demo 或内部工具，直接选文档最顺手的那个就行，不必纠结；选型的成本应该花在会长期维护的正式项目上。

中后台系统闭眼选 Element Plus 或 Ant Design Vue，两者社区都够大；想要 Material 风格或面向海外就看 Vuetify；View Design 适合想要整套后台方案的团队；Vuesax 已停止维护，仅作参考。选型没有标准答案，贴合团队习惯和产品风格的就是好选择。