V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hambman
V2EX  ›  Vue.js

Vue UI 框架选择: Vuetify vs. BootstrapVue

  •  
  •   hambman · 2020-09-18 04:38:42 +08:00 · 10485 次点击
    这是一个创建于 1508 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    • 组件的丰富程度
    • 开发的难易程度,不希望是类似 bulma 的纯 css,需要额外逻辑
    • 生态:第三方插件等
    • 模版:能不能比较容易加入 dark 模式,或者第三方模式等。
    • 性能,大小
    • 后续开发, 升级维护,
    第 1 条附言  ·  2020-09-18 09:12:27 +08:00
    大家也建议了 ant design, 它的优缺点怎么评价?
    61 条回复    2020-09-19 01:21:47 +08:00
    gtexpanse
        1
    gtexpanse  
       2020-09-18 06:27:00 +08:00 via iPhone
    我也刚开始看这两框架,vuetify 的文档页面体验好差啊,字体太大,中间 api 一览下拉很磨人。
    由于我是后端同学,技术方面的没参考价值 /狗头
    AJQA
        2
    AJQA  
       2020-09-18 07:21:05 +08:00 via Android
    vuetify js 太多 有好几次页面加载完 vuetify 下拉框组建的多语言文本 js 没有正确加载 导致显示的都是大写文本 已转成 bulma
    真诚为发现 bulma 感到高兴
    AJQA
        3
    AJQA  
       2020-09-18 07:22:26 +08:00 via Android
    veutify 还在用 全屏 dialog 很好
    woahishui
        4
    woahishui  
       2020-09-18 07:42:25 +08:00 via Android
    jquery
    wxsm
        5
    wxsm  
       2020-09-18 07:46:06 +08:00 via iPhone
    Bootstrap vue 对应你的要求基本不合格。
    sunmoon1983
        6
    sunmoon1983  
       2020-09-18 08:20:53 +08:00   ❤️ 1
    我选 element ui
    zidian
        7
    zidian  
       2020-09-18 08:22:47 +08:00
    你的要求很矛盾。。。
    renmu123
        8
    renmu123  
       2020-09-18 08:34:36 +08:00 via Android
    其实最推荐 elementui,就是最近没什么人维护了
    rodrick
        9
    rodrick  
       2020-09-18 08:40:51 +08:00
    @renmu123 三天前还更新了交流群二维码😂也算维护了
    sagaxu
        10
    sagaxu  
       2020-09-18 08:54:01 +08:00 via Android
    @renmu123 element plus 正在路上,vue 3.0 适配已经进行中
    loading
        11
    loading  
       2020-09-18 08:57:19 +08:00 via Android
    建议 jQuery
    hambman
        12
    hambman  
    OP
       2020-09-18 08:59:59 +08:00
    @loading @woahishui 不用 jquery 主要是我对后端更熟悉,希望尽可能开箱即用..
    hambman
        13
    hambman  
    OP
       2020-09-18 09:00:40 +08:00
    @wxsm 能谈一谈 bootstrap Vue 那方面不合适吗?我看控件也貌似挺全的,开发也算活跃.
    hambman
        14
    hambman  
    OP
       2020-09-18 09:01:45 +08:00
    @gtexpanse 是,我也觉得 vuetify 的文档组织得不好,不过没听到什么关于 vuetify 的缺点,除了不喜欢 material design 之外。
    hambman
        15
    hambman  
    OP
       2020-09-18 09:04:16 +08:00
    @virtuemartx 你对 javascript, jquery 比较熟悉对吗? 我喜欢 bulma 的思路,如果熟悉的话,bulma 应该是一个不错的取舍。考虑过 buefy 吗?
    sagaxu
        16
    sagaxu  
       2020-09-18 09:04:23 +08:00 via Android   ❤️ 1
    @hambman ant design 不妨考虑一下
    goonxh
        17
    goonxh  
       2020-09-18 09:05:50 +08:00
    ant design
    yaphets666
        18
    yaphets666  
       2020-09-18 09:07:37 +08:00
    目前 vue 这边没有能完全满足你需求的组件库
    hambman
        19
    hambman  
    OP
       2020-09-18 09:10:22 +08:00
    @sunmoon1983 只有 pc 端吧?
    hambman
        20
    hambman  
    OP
       2020-09-18 09:10:51 +08:00
    @yaphets666 React 那边呢? 如果有特别合适的,可以考虑。
    hambman
        21
    hambman  
    OP
       2020-09-18 09:11:40 +08:00
    @sagaxu @goonxh 能谈一谈 ant design 相对 vuetify boostrapVue 的优点吗
    renmu123
        22
    renmu123  
       2020-09-18 09:34:00 +08:00
    @sagaxu #10 现在主要是社区在维护还是饿了么那边的团队啊?
    TimPeake
        23
    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
        24
    zarte  
       2020-09-18 09:37:02 +08:00
    elementui 元素代码简洁点,缺点是有些组件没有。ant design 大部分组件都有,缺点是元素代码不简洁。不知道你说的那两个渲染数据多的时候效率会不会高。ant design select 元素多的时候会卡,还有输入框会卡。
    tanranran
        25
    tanranran  
       2020-09-18 09:38:44 +08:00
    @renmu123 #8 一直还有人维护的
    myzyq
        26
    myzyq  
       2020-09-18 09:47:03 +08:00
    element ui 更符合你的要求
    GoNtte
        27
    GoNtte  
       2020-09-18 09:50:21 +08:00
    elementui 不维护后,我找了一下觉得 iview 还不错,ui 上产品接受度高,和设计的风格也比较相近。vuetify 在国内感觉不太好用
    jydeng
        28
    jydeng  
       2020-09-18 10:11:13 +08:00
    推荐 element ui,简单用用可以了,有复杂需求自己定制。
    phpxiaowangzi
        29
    phpxiaowangzi  
       2020-09-18 10:17:39 +08:00
    移动端的话现在在用 vant
    ITsWHY
        30
    ITsWHY  
       2020-09-18 10:36:34 +08:00
    有没有人能说一下 iview 和 element ui 的优缺点
    zzzmh
        31
    zzzmh  
       2020-09-18 10:41:35 +08:00
    我知道 iview 现在很不受待见,但我个人还挺喜欢他的,我是后端在自学前端哈哈哈
    popil1987
        32
    popil1987  
       2020-09-18 10:53:30 +08:00
    作为一个后端推荐下 quasar.dev
    个人感觉比 vuetify 要好看,需要写的 css 要少,不过相当重,有自己的 cli 。
    虽然个人不喜欢重的东西,但我一个后端也没必要深入研究,拿来能用就好
    jake361
        33
    jake361  
       2020-09-18 10:56:01 +08:00
    antd.vue 不香吗,现在应该是被阿里收了
    xqdoo00o
        34
    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
        35
    xqdoo00o  
       2020-09-18 11:22:30 +08:00
    antd 应该是最早出 vue 3.0 的 UI 框架吧,其他 ui 框架好像还没有消息。
    lin07hui
        36
    lin07hui  
       2020-09-18 11:36:30 +08:00
    view-design 或 Ant Design of Vue,个人比较喜欢后者
    hambman
        37
    hambman  
    OP
       2020-09-18 12:47:46 +08:00
    @popil1987 谢谢, 这个我也看到不少,感觉比较新,功能很多,不知道成熟度怎么样
    hambman
        38
    hambman  
    OP
       2020-09-18 12:49:06 +08:00
    @TimPeake 谢谢 iview 我看了看,觉得不错。它也不原生支持移动对吧? Vuetify 的桌面端的确比较散
    EminemW
        39
    EminemW  
       2020-09-18 13:18:06 +08:00 via iPhone
    不要用阿里的 kpi 产品
    lerry
        40
    lerry  
       2020-09-18 13:24:16 +08:00
    我用的 buefy 感觉还不错,因为一直用 Bulma,就选了这个
    suzic
        41
    suzic  
       2020-09-18 13:29:54 +08:00 via Android
    移动端友好就不要用 ant 了。个人推荐 vuetify
    afc163
        42
    afc163  
       2020-09-18 13:34:32 +08:00
    @EminemW Ant Design Vue 不是阿里维护的。
    Chenamy2017
        43
    Chenamy2017  
       2020-09-18 13:52:14 +08:00
    没看你需求,但我用的是 element ui
    toma77
        44
    toma77  
       2020-09-18 13:56:02 +08:00
    @afc163 Ant Design Vue 是私人项目??
    wangyzj
        45
    wangyzj  
       2020-09-18 14:30:39 +08:00
    用了好久 element 看着 vuetify 还挺舒服的
    a632079
        46
    a632079  
       2020-09-18 15:38:05 +08:00
    @toma77 是的,现在也只是社区参与
    robinlovemaggie
        47
    robinlovemaggie  
       2020-09-18 15:47:38 +08:00
    Vue CLI 的 UI 控制台就挺好的,布局 /小件 /暗色主题什么都有的,而且轻量级
    fhsan
        48
    fhsan  
       2020-09-18 15:49:44 +08:00
    别说了,我现在 antd pro
    Shook
        49
    Shook  
       2020-09-18 16:05:39 +08:00
    因为不喜欢 iview 的组件命名方式( iview 推荐用大驼峰,否则和自带的标签重名,如<Button>和<button>),投入了 element-ui 的怀抱。
    agdhole
        50
    agdhole  
       2020-09-18 16:20:02 +08:00
    vuetify 正在重写新版文档 https://next.vuetifyjs.com/
    OHyn
        51
    OHyn  
       2020-09-18 16:25:40 +08:00 via Android
    element 用户量大,上线时间长,坑都踩得差不多了。。。
    JaguarJack
        52
    JaguarJack  
       2020-09-18 16:33:17 +08:00
    element ui , BUG 少,周围生态得组件多,干嘛给自己找不痛快
    stevenhawking
        53
    stevenhawking  
       2020-09-18 16:50:29 +08:00
    我用 Bootstrap Vue,目前觉得很安逸
    woahishui
        54
    woahishui  
       2020-09-18 17:06:56 +08:00 via Android
    easyui,layer 不行吗
    woahishui
        55
    woahishui  
       2020-09-18 17:07:10 +08:00 via Android
    jqueryUI
    Terry05
        56
    Terry05  
       2020-09-18 17:35:28 +08:00
    最近正好就在用 vuetify 做一个内部使用的手机端 web 内容,整体都不错,就是有一些地方也许是设计上的差异,也许是功能上的缺失,有一些功能做起来很痛苦

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

    功能做差不多后,再回头看了下友赞的 Vant,功能好全啊。。。早知道用 Vant 了
    max1024
        57
    max1024  
       2020-09-18 17:47:25 +08:00 via iPhone
    我选 element ui
    succlz123
        58
    succlz123  
       2020-09-18 22:38:48 +08:00
    最近在学 vue, 用 vuetify 刚好都碰到你说的这 2 个问题哈哈
    succlz123
        59
    succlz123  
       2020-09-18 22:39:13 +08:00
    yiyi11
        60
    yiyi11  
       2020-09-18 23:11:01 +08:00
    antd-vue,还是阿里资源多,只要 antd-react 和 vue 不倒就能一直跟进。
    hambman
        61
    hambman  
    OP
       2020-09-19 01:21:47 +08:00
    @Terry05 谢谢分享经验 。你的应用只需要手机端,不需要考虑 pc 端吗? pc 端感受如何?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1228 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 17:57 · PVG 01:57 · LAX 09:57 · JFK 12:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.