vue 移动端组件库调研

注:该文章相关信息截止至2019.10.10

前言

  为了更好地展开移动端项目的开发工作,部门打算开发一个移动端组件库。而要要将自己的移动端组件库开发好,就得先选择一个基于 vue 并且合适的移动端组件库作为基础组件库,所以有了下文的调研和分析。

一、现有 vue 相关组件库基本分析

1. vonic (v1.1.3)

预览 star: 3261; 用户量:218
一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用。

1
2
优势:包含比较全面的组件/服务/指令
劣势:最近更新时间是8个月前,用户量和讨论不是很多,活跃度不高

2. vux (v2.9.4)

预览 star:16337 用户量:9012

1
2
3
4
5
6
7
8
9
10
11
12
13
14
特点:
1.个人维护
2.支持 Nuxt.js
3.支持自定义主题
4.组件样式仿照微信
5.适合微信端移动项目

优势:组件全面,用户量多,讨论活跃度还OK

劣势:
1. 必须配合 vux-loader 使用
2. less@3.x 有严重的兼容问题,请暂时使用 less@^2.7.3
3. 暂未适配 vue-cli@3.x
4. 不推荐使用 umd 方式引用组件

3. Mint UI

预览 github star: 14968 用户量:24931
饿了么前端团队开发的移动端组件库。

1
2
3
4
5
6
7
8
9
10
11
12
13
项目特点

1.团队维护
2.真正做到了按需引入,每个组件有单独的包
3.CSS3 处理各种动效
4.组件齐全
5.适用于移动端常规项目

样式: scss、template、script、css 都在一个文件中,长类名区分

优点:用户量多

劣势:两年多项目和文档都没有更新了,有不少bug,用户反馈的很对问题也没有解决,感觉有点凉,不太敢用

4. MUI

github star: 12077 用户量:495

1
2
3
4
5
6
7
8
9
项目特点:
1.轻量:追求性能体验,MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K。
2.原生UI:以iOS平台UI为基础,补充部分Android平台特有的UI控件
3.流畅体验:各种动画实现。

优势:
1. 有自己的讨论社区(https://ask.dcloud.net.cn/explore/sort_type-new__category-3__day-0),活跃度挺好的

劣势: 一年没有更新了,很多issues 都没有被解决

5. Muse-ui (V3.0.2)

github star: 7714 用户量:4106

1
2
3
4
项目特点:
1.组件丰富:40多个UI 组件,用于适应不同业务环境。
2.可定制:自定义主题方式极为优雅,仅需少量代码即可完成主题样式替换。
3.基于 Vue 2.0:是当下最快的前端框架之一,小巧,api友好,可用于开发的复杂单页应用

6. vant

github star: 10573 用户量:8590
有赞团队开发的移动端组件库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
项目特点;
1.团队维护
2.有多个版本:小程序 UI => Vant Weapp、PC 端 React UI => Zen
3.支持 SSR
4.常规支持:多语言、自定义主题、按需引入
5.文档详细,组件齐全
6.适用于移动端商城购物类网站
7.60+ 高质量组件
8.95% 单元测试覆盖率
9.完善的中英文文档和示例
10.支持按需引入、主题定制、国际化
11.支持 TS 、SSR

优势: 至今一直有人维护,用户量多,社区活跃度高,支持vue-cli3

7. Cube UI

github star:7095 用户量:1855
滴滴团队开发的移动端组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1.团队维护
2.支持后编译
3.常规支持:多语言、自定义主题、按需引入
4.文档详细,组件齐全
5.扩展性强,可以方便地基于现有组件实现二次开发
6.适合移动端需要扩展的项目,或者引用框架部分源代码组合成自己的 ui 组件库

样式:scss、BEM 类名命名法

优势:
1. 支持vue-cli 3
2. 维护积极,直到目前一直有人在更新

劣势:用户量偏少

8. NutUI (V2.1.5)

预览 star: 1346 使用量:69
NutUI是一套京东风格的移动端Vue组件库,开发和服务于移动Web界面的企业级前中后台产品。于2018.01发布。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
项目特性:
1. 跨平台,自动转微信小程序组件(稍后上线,敬请期待)
2. 30+ 京东移动端项目正在使用
3. 基于京东APP 7.0 视觉规范
4. 支持按需加载
5. 详尽的文档和示例
6. 支持定制主题
7. 支持多语言(国际化)
8. 支持 TypeScript
9. 支持服务端渲染(Vue SSR)
10. 单元测试加持
11. 配套有基于Webpack的构建工具,可快速创建已内置本组件库的Vue工程

支持环境
1. Android 4.0+
2. iOS 8.0+
3. 支持服务端渲染

优势:组件很全面,最近更新时间是3个月前

劣势:用户量偏少,目前主要是京东内部项目在使用。

9. vue-carbon

预览
已停止维护,迁移到muse-ui

10. vum

预览 github

1
已经两年没更新,较少用户量,缺少文档

11. Weex

GitHub
兼容多端的库

二、github 数据(至2019.09.22)

组件库 star 仓库使用量 watch 最近更新时间 issue
vonic 3261 218 500 8个月前 62/124
vux 16337 9012 717 5个月前 705/2438
Mint UI 14968 24931 500 2年前 230/972
MUI 12077 495 905 一年前 309/117
Muse-ui 7714 4106 290 6个月前 125/1146
vant 10573 8590 297 今天 14/2647
Cube UI 7095 1855 203 5天前 26/447
NutUI 1346 69 62 2月前 80/65
Weex-UI 4614 531 182 4天前 7/355

三、结合组件库调研结果,抽取以下几个组件库进行进行详细分析

选择的组件库包含: Mint UI/Vux/Muse-ui/vant/Cube-ui/

1. 功能是否全面(需求契合度,多样性等,满分10分)

  • Mint-UI: 缺少对话框,卡片,容器组件,包含三大类组件(JS components, css components, form components),即29种小组件。(7分,扣在缺少部分组件)
  • Vux: 功能比较全面,包含11大类工具或组件(2个样式解决方案,一个新指令,7个工具函数,一个数据展示组件,2种图标展示方式,13种弹窗提示组件,5种导航组件,14种数据展示组件,29种表单组件,5种布局,3种基础组件)。(10分)
  • Muse-Ui: 组件超酷(个人很喜欢),组件风格可拓展(颜色,主题,icon,字体,布局),包含3种工具(过渡动画,4个指令,点击效果),5种插件,33种组件。(8分,扣在组件过于炫酷,不太符合已有需求的交互样式,使用后可能会增加工作量)。
  • Vant: 功能比较全面,也比较通用,比容易拓展。包含5种基础组件,14种表单组件,9种反馈组件,15种展示组件,8种导航组件,9种业务组件。(10分)
  • Cube-Ui: 组件缺少顶部菜单,组件多样性偏少。包含5种基础组件,12种表单组件,11种弹出层相关组件,8种滚动相关的组件(5分)

2. 是否易于拓展

  • Mint-UI: 不支持国际化和主题定制,拓展性一般(主要是文档不够完善)(5分)
  • Vux: 不支持vue-cli3,必须配合 vux-loader 使用,less@3.x 有严重的兼容问题,文档很详细(存在什么坑以及对应解决方案,全部有给出),支持国际化(要装一个插件),支持主题颜色配置。(7分)
  • Muse-Ui: 未说明是否支持国际化或主题定制(5分)
  • Vant: 支持vue-cli3支持主题定制,颜色定制(进行样式变量的覆盖),支持国际化(多语言切换,修改默认文案),提供了一定的示例工程和适配方案。(10分)
  • Cube-Ui: 支持国际化,支持基于现有组件实现二次开发,使用后编译,编译时间缩短,支持主题定制。(9分)

3. 是否稳定,bug数量(参考GitHub issuse内容)

  • Mint-UI: 未解决issuse超200个,未解决bug偏多(5分)
  • Vux: 对话框样式有bug,708个issuse未被解决,bug有点偏多,不过作者有打算重新回来维护(6分)
  • Muse-Ui: 未解决issuse 127个 (7分)
  • Vant: 还有20个issuse在等待解决,问题解决速度很快(10分)
  • Cube-Ui: 还有30个左右的issuse未解决,解决问题速度挺好的(10分)

4. 是否依旧维护

  • Mint-UI: 未解决issuse超200个,未解决bug偏多,2两年多没有维护和更新了,凉得不行(5分)

  • Vux: 已恢复正常维护和更新,个人维护,最近一次更新为5个月前(8分,但是由于是个人维护,感觉不够靠谱,扣一些分)

  • Muse-Ui: 最近一次更新时间是7个月前 (7分)

  • Vant: 几乎每天都有在维护和更新,维护很勤快(10分)

    1
    2
    3
    4
    5
    6
    vant 发布节奏:
    修订号:每周发布,包含新特性和问题修复。
    次版本号:每隔一至二个月发布,包含新特性和较大的功能更新,向下兼容。
    主版本号:发布时间不定,包含不兼容更新,预计下一个主版本会与 Vue 3.0 同期发布。

    补充:文档信息很完善
  • Cube-Ui:最近一个月有进行更新维护(9分)

5. 仓库使用量

  • Mint-UI: 24931(10分,好像是出现的比较早)
  • Vux: 9012(9分)
  • Muse-Ui: 4106(7分)
  • Vant: 8590(现在好像变为9000多了,增长速度很快)(9分)
  • Cube-Ui: 1855(4分)

6. 综上5个方面,得出总体评分如下:

总的来说 ==》移动端基础组件库有赞vant完胜

其实感觉只有这个库比较合适了,其他库要不维护积极性偏低,或用户量偏少,要不就是不利于拓展,没得选…

参考文章