现代Vue3技术栈下的前端UI框架小调研

我2021年自己业余整项目时就已经在用Vue3全家桶了，这回时隔四年又过来重新调研一番，怎么看来看去还是那Vite + Vue3 + Pinia + Axios 老几样……

没活了是吧，看来前端这圈子还是算稳定，也就近几年流行起了TailwindCSS, 所以很多人可能都不选UI框架了，但我因为需求还是得扫一圈整理整理，所以也照常做个笔记。

按现在的行情来看，Vue3领域的UI框架，基本也就在下面选了

Element Plus

https://element-plus.org/zh-CN/

继承自老的 ElementUI，组件丰富稳定，但不方便自定义，好处是用的人很多，趟过坑的人多

从ElementUI（vue2）升级过来的话，API不会变动太多

有很多成熟的第三方后台模板/中后台脚手架

问题：性能没那么好，东西多了会比较卡，UI 风格偏传统

对于企业级的后台管理系统可以充分胜任，Table、Form、Tree常用组件看一圈功能性没有任何问题，Vue2时代起就很稳，如果考虑到延续技术路线的角度、老项目重构角度的话，这个可以说是唯一选。

https://www.naiveui.com/zh-CN

现代化 UI 框架，默认样式比Element好看很多，不过真to C的话核心视觉风格依旧得靠 CSS 样式和设计调整，如果还是纯靠默认组件组合其实这些都大差不差吧，对视觉品质有要求的Antd可能比这个好些。

组件很多（还有些杂七杂八的奇怪组件，有种突破传统感），而且能配置的粒度比较细，可以自由组合，灵活性高

对比 Element 、Antd 之类而言，沉淀的时间没那么长，2021 年才上线，只有 4 年，所以生态相对小，但我个人用起来，感觉没什么问题，我是在22年用的，那个时候就已经用起来很顺手了，更别说现在。

尤雨溪推荐过，的确值得信赖。

综合方面来看是个很优秀的UI框架，新项目推荐。

https://antdv.com/components/overview

我最开始接触Vue3的时候，用的就是这个，API用起来很舒服。

基于 Ant Design，风格统一，组件样式更精致、一致性强，功能也很丰富，用来做C端应用我觉得没什么问题。

不过呢，根据调查来看，开发团队似乎是在付费组件上面尝到了甜头，现在主要的维护精力不在开源 UI 组件库当中了，NPM包最近更新时间都是八个月之前。

你要放以前，我是推荐的，因为我用起来各方面都觉得挺不错，现在这个时间真不好说，React技术栈考虑Antd可能会好些，Vue3技术栈还是仔细想想。

https://vuetifyjs.com/zh-Hans/

这框架是后续才跟进的Vue3，最开始Vue3出来的时候我调研过，那个时候确实不怎么好用，但现在应该可以了，毕竟这个框架也是老牌外国框架，star很多，稳定性应该不需要质疑。

整体基于 Material Design 风格，技术成熟，但真不咋好看，不太符合现代化的后台审美。

感觉上是个和Element性质差不多的框架，那为何不使用Element呢？对这个框架了解不多，我觉得这个很需要权衡。

https://primevue.org/introduction/

首先，这个东西很好看，看过去就有种眼前一亮的感觉。其次，他的样式改起来简单，框架原生支持Tailwind CSS，甚至官方提供了无样式版本给你专门定制，该组件库由专业前端团队维护，更新稳定

自带的组件可以说相当丰富，你不需要交钱就能用虚拟滚动虚拟列表（反观……），内部支持一个基于Chart.js的图表组件也是亮点。

重要的是对手机端也很友好，还特么支持无障碍。

官方提供了一个纯免费开源的后台管理系统，哪怕对比起其他UI框架的付费Pro版本、第三方维护的管理端之类，我觉得都是已经很不错了

https://sakai.primevue.org/

如果你真想付费，人家也有付费的模板。甚至交点钱也能上可视化编辑器、Figma代码转换之类的，我感觉这个东西算是非常全面的一个框架。

考虑到用户体验、现代化视觉品质的话、快速起项目脚手架的话，非常推荐这个。