Vue UI 框架选择: Vuetify vs. BootstrapVue

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1561 天前的主题，其中的信息可能已经有所发展或是发生改变。

下一个项目初步打算二选一。前面的讨论大家推荐 Vuetify 的人比较多 https://www.v2ex.com/t/700419 想问问大家这两者具体怎么比较？

项目的主要在内容，对于 UI，要简洁，移动友好，尽可能降低开发难度，尤其是样式方面，但是也希望封装适度，偶尔能定制和调试问题

几个方面，自己看了一些，但是经验不够，请问大家怎么看

组件的丰富程度
开发的难易程度，不希望是类似 bulma 的纯 css，需要额外逻辑
生态：第三方插件等
模版：能不能比较容易加入 dark 模式，或者第三方模式等。
性能，大小
后续开发，升级维护，

第 1 条附言 · 2020-09-18 09:12:27 +08:00

大家也建议了 ant design, 它的优缺点怎么评价？

vuetify

第三方

Vue

bulma

61 条回复 • 2020-09-19 01:21:47 +08:00

gtexpanse

2020-09-18 06:27:00 +08:00 via iPhone

我也刚开始看这两框架，vuetify 的文档页面体验好差啊，字体太大，中间 api 一览下拉很磨人。
由于我是后端同学，技术方面的没参考价值 /狗头

AJQA

2020-09-18 07:21:05 +08:00 via Android

vuetify js 太多有好几次页面加载完 vuetify 下拉框组建的多语言文本 js 没有正确加载导致显示的都是大写文本已转成 bulma
真诚为发现 bulma 感到高兴

AJQA

2020-09-18 07:22:26 +08:00 via Android

veutify 还在用全屏 dialog 很好

woahishui

2020-09-18 07:42:25 +08:00 via Android

jquery

wxsm

2020-09-18 07:46:06 +08:00 via iPhone

Bootstrap vue 对应你的要求基本不合格。

sunmoon1983

2020-09-18 08:20:53 +08:00

我选 element ui

zidian

2020-09-18 08:22:47 +08:00

你的要求很矛盾。。。

renmu123

2020-09-18 08:34:36 +08:00 via Android

其实最推荐 elementui，就是最近没什么人维护了

rodrick

2020-09-18 08:40:51 +08:00

@renmu123 三天前还更新了交流群二维码😂也算维护了

sagaxu

2020-09-18 08:54:01 +08:00 via Android

@renmu123 element plus 正在路上，vue 3.0 适配已经进行中

loading

2020-09-18 08:57:19 +08:00 via Android

建议 jQuery

hambman

2020-09-18 08:59:59 +08:00

@loading @woahishui 不用 jquery 主要是我对后端更熟悉，希望尽可能开箱即用..

hambman

2020-09-18 09:00:40 +08:00

@wxsm 能谈一谈 bootstrap Vue 那方面不合适吗？我看控件也貌似挺全的，开发也算活跃.

hambman

2020-09-18 09:01:45 +08:00

@gtexpanse 是，我也觉得 vuetify 的文档组织得不好，不过没听到什么关于 vuetify 的缺点，除了不喜欢 material design 之外。

hambman

2020-09-18 09:04:16 +08:00

@virtuemartx 你对 javascript, jquery 比较熟悉对吗？我喜欢 bulma 的思路，如果熟悉的话，bulma 应该是一个不错的取舍。考虑过 buefy 吗？

sagaxu

2020-09-18 09:04:23 +08:00 via Android

@hambman ant design 不妨考虑一下

goonxh

2020-09-18 09:05:50 +08:00

ant design

yaphets666

2020-09-18 09:07:37 +08:00

目前 vue 这边没有能完全满足你需求的组件库

hambman

2020-09-18 09:10:22 +08:00

@sunmoon1983 只有 pc 端吧？

hambman

2020-09-18 09:10:51 +08:00

@yaphets666 React 那边呢？如果有特别合适的，可以考虑。

hambman

2020-09-18 09:11:40 +08:00

@sagaxu @goonxh 能谈一谈 ant design 相对 vuetify boostrapVue 的优点吗

renmu123

2020-09-18 09:34:00 +08:00

@sagaxu #10 现在主要是社区在维护还是饿了么那边的团队啊?

TimPeake

2020-09-18 09:34:12 +08:00

我是前端。
目前 Vue 首选框架我觉得是 iview > ant design> vuetify
为什么是这个顺序？
1 、iview 显然是国内 vue 里 UI 最成熟的,elementui 现在停止维护了所以不考虑。
2 、ant design for vue 版本，我个人感觉没 iview 在 vue 领域深耕多年来的成熟，大概率会比 ant design for vue Bug 少。
3 、vuetify 深得程序员和国外用户好评，但是国内普通用户和大多数产品经理、领导实在是喜欢不来。
呐呢？要移动端适应？ vuetify 兼容移动端，但是 pc 端就显得比较别扭了。
要兼容移动端，无论是哪个 UI 还是得花点时间写点兼容移动端 pc 端的样式，所以这么看来在兼容移动端方面其实差别不大

zarte

2020-09-18 09:37:02 +08:00

elementui 元素代码简洁点，缺点是有些组件没有。ant design 大部分组件都有，缺点是元素代码不简洁。不知道你说的那两个渲染数据多的时候效率会不会高。ant design select 元素多的时候会卡，还有输入框会卡。

tanranran

2020-09-18 09:38:44 +08:00

@renmu123 #8 一直还有人维护的

myzyq

2020-09-18 09:47:03 +08:00

element ui 更符合你的要求

GoNtte

2020-09-18 09:50:21 +08:00

elementui 不维护后，我找了一下觉得 iview 还不错，ui 上产品接受度高，和设计的风格也比较相近。vuetify 在国内感觉不太好用

jydeng

2020-09-18 10:11:13 +08:00

推荐 element ui，简单用用可以了，有复杂需求自己定制。

phpxiaowangzi

2020-09-18 10:17:39 +08:00

移动端的话现在在用 vant

ITsWHY

2020-09-18 10:36:34 +08:00

有没有人能说一下 iview 和 element ui 的优缺点

zzzmh

2020-09-18 10:41:35 +08:00

我知道 iview 现在很不受待见，但我个人还挺喜欢他的，我是后端在自学前端哈哈哈

popil1987

2020-09-18 10:53:30 +08:00

作为一个后端推荐下 quasar.dev
个人感觉比 vuetify 要好看，需要写的 css 要少，不过相当重，有自己的 cli 。
虽然个人不喜欢重的东西，但我一个后端也没必要深入研究，拿来能用就好

jake361

2020-09-18 10:56:01 +08:00

antd.vue 不香吗，现在应该是被阿里收了

xqdoo00o

2020-09-18 11:14:25 +08:00

按照 bug 数量来说，应该会 iview > element > antd
曾经被 iview 的 bug 逼的改源码，element 的 bug 也不少，而且感觉 UI 不太符合个人审美。
antd 的 bug 应该是最少的，可能是因为源码是 jsx 写的？ iview 和 element 都是 vue 组件写法。

xqdoo00o

2020-09-18 11:22:30 +08:00

antd 应该是最早出 vue 3.0 的 UI 框架吧，其他 ui 框架好像还没有消息。

lin07hui

2020-09-18 11:36:30 +08:00

view-design 或 Ant Design of Vue，个人比较喜欢后者

hambman

2020-09-18 12:47:46 +08:00

@popil1987 谢谢，这个我也看到不少，感觉比较新，功能很多，不知道成熟度怎么样

hambman

2020-09-18 12:49:06 +08:00

@TimPeake 谢谢 iview 我看了看，觉得不错。它也不原生支持移动对吧？ Vuetify 的桌面端的确比较散

EminemW

2020-09-18 13:18:06 +08:00 via iPhone

不要用阿里的 kpi 产品

lerry

2020-09-18 13:24:16 +08:00

我用的 buefy 感觉还不错，因为一直用 Bulma，就选了这个

suzic

2020-09-18 13:29:54 +08:00 via Android

移动端友好就不要用 ant 了。个人推荐 vuetify

afc163

2020-09-18 13:34:32 +08:00

@EminemW Ant Design Vue 不是阿里维护的。

Chenamy2017

2020-09-18 13:52:14 +08:00

没看你需求，但我用的是 element ui

toma77

2020-09-18 13:56:02 +08:00

@afc163 Ant Design Vue 是私人项目？？

wangyzj

2020-09-18 14:30:39 +08:00

用了好久 element 看着 vuetify 还挺舒服的

a632079

2020-09-18 15:38:05 +08:00

@toma77 是的，现在也只是社区参与

robinlovemaggie

2020-09-18 15:47:38 +08:00

Vue CLI 的 UI 控制台就挺好的，布局 /小件 /暗色主题什么都有的，而且轻量级

fhsan

2020-09-18 15:49:44 +08:00

别说了，我现在 antd pro

Shook

2020-09-18 16:05:39 +08:00

因为不喜欢 iview 的组件命名方式（ iview 推荐用大驼峰，否则和自带的标签重名，如<Button>和<button>），投入了 element-ui 的怀抱。

agdhole

2020-09-18 16:20:02 +08:00

vuetify 正在重写新版文档 https://next.vuetifyjs.com/

OHyn

2020-09-18 16:25:40 +08:00 via Android

element 用户量大，上线时间长，坑都踩得差不多了。。。

JaguarJack

2020-09-18 16:33:17 +08:00

element ui , BUG 少，周围生态得组件多，干嘛给自己找不痛快

stevenhawking

2020-09-18 16:50:29 +08:00

我用 Bootstrap Vue，目前觉得很安逸

woahishui

2020-09-18 17:06:56 +08:00 via Android

easyui,layer 不行吗

woahishui

2020-09-18 17:07:10 +08:00 via Android

jqueryUI

Terry05

2020-09-18 17:35:28 +08:00

最近正好就在用 vuetify 做一个内部使用的手机端 web 内容，整体都不错，就是有一些地方也许是设计上的差异，也许是功能上的缺失，有一些功能做起来很痛苦

1.类似朋友圈般的缩略图，全屏预览图片的功能是完全没有的，需求是要尽可能接近手机上的使用习惯，能全屏查看、能通过手指放大缩小、能左右滑动切换图片，折腾了一圈，最终是使用 PhotoSwipe 来解决，但它最麻烦的地方是必须指定图片宽度和高度，通常文章接口返回的只是图片的 url，谁会给你图片的尺寸信息，最终还得去查看 vuetify 的源码，通过获得内部对象才解决的问题
2.没有指令式的方式来显示消息，需求是 http 工具的全局封装对于错误的统一弹出显示，习惯了 element-ui 的 message 和 messagebox 来显示，就很方便

功能做差不多后，再回头看了下友赞的 Vant，功能好全啊。。。早知道用 Vant 了