Vue ui 大法哪家强？

Posted 2020-08-18

Element iView Vuex Mint UI Vant cube-ui，对比六大 vue ui 组件库，选中最适合的那个。

Element(pc)

介绍 & 版本

饿了么前端团队开发的桌面端组件库，当前最新版本：2.4.8

Star：32.067k

项目特色

1. 团队维护
2. 支持三个版本：vue、react、angular
3. 支持 Nuxt.js
4. 常规支持：多语言、自定义主题、按需引入、内置过渡动画
5. 文档详细，组件齐全
6. 支持响应式布局，提供基于断点的隐藏类
7. 适合常规 pc 端项目

样式

类名大量使用计算属性，css 和主文件分离单独一个文件

官网地址

Element

GitHub 仓库地址

Element github

iView(pc)

版本介绍

主要服务于 PC 界面的中后台产品，当前最新版本：3.x

Star：18.086k

项目特色

1. 团队维护
2. 支持： Nuxt.js、TypeScript、Electron
3. 常规支持：多语言、自定义主题、按需引入
4. 文档详细，组件齐全
5. 支持响应式布局
6. UI 比较美观
7. 适合常规 pc 端项目，皮肤美观

样式

less 计算属性 前缀嵌套

官网地址

iView

GitHub 仓库地址

iView github

Vuex(mob)

介绍

类似微信样式的移动端组件库，当前最新版本：2.9.2

Star：14.358k

项目特色

1. 个人维护
2. 支持 Nuxt.js
3. 支持自定义主题
4. 组件样式仿照微信
5. 适合微信端移动项目

样式

less 长类名区分

官网地址

Vuex

GitHub 仓库地址

Vuex github

Mint UI(mob)

版本介绍

饿了么前端团队开发的移动端组件库，当前最新版本：2.2.7

Star：12.583k

项目特色

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

样式

scss、template、script、css 都在一个文件中，长类名区分

官网地址

Mint UI

GitHub 仓库地址

Mint UI github

Vant(mob)

版本介绍

有赞团队开发的移动端组件库，当前最新版本：1.3.10

Star：6.31k

项目特色

1. 团队维护
2. 有多个版本：小程序 UI => Vant Weapp、PC 端 React UI => Zen
3. 支持 SSR
4. 常规支持：多语言、自定义主题、按需引入
5. 文档详细，组件齐全
6. 适用于移动端商城购物类网站

样式

scss、BEM 类名命名法

官网地址

Vant

GitHub 仓库地址

Vant github

cube-ui(mob)

版本介绍

滴滴团队开发的移动端组件库，当前最新版本：1.11.2

Star：4.296k

项目特色

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

样式

scss、BEM 类名命名法

官网地址

cube-ui

GitHub 仓库地址

cube-ui github

原文地址：https://segmentfault.com/a/1190000016896883