推荐一些你可能需要的 UI 组件库

Element UI

简介

• Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
• 组件丰富，样式风格简约，文档讲解详细，上手简单，Github 的 Star：46.9k。
• 免费开源，不过最近发现已经几个月不维护了，issues 也 Closed，如果你后面用上了 Vue3.0，那么就不能继续使用这一套 UI 框架，因为容易出现许多的问题
• 解决方法：
  • 新的项目的话可以考虑其他的 UI 框架：
    • vuetify
    • Ant Design of Vue
  • Fork 一份自己维护。

适用场景

• 基于 Vue 的 SPA PC 项目。

官网地址

• Element UI 文档
• Element UI Github

View UI

简介

• 一套基于 Vue.js 的高质量 UI 组件库。
• View UI，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。
• 从 2019 年 10 月起正式更名为 View UI，并使用全新的 Logo。
• 免费开源，组件丰富，样式风格简约，文档讲解详细，上手简单，Github 的 Star：
  • iView UI：46.9k。
  • View UI：1.8k。

适用场景

• 基于 Vue 的 SPA PC 项目。

官网地址

• View UI 4.x 文档
• iView UI 2.x 文档
• View UI Github
• iView UI Github

Ant Design

简介

• antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
• 免费开源，组件丰富，样式风格简约，文档讲解详细，上手简单，Github 的 Star：62.8k。
• 个人对于 TimePicker 时间选择框组件里的滚动条感觉体验不好。

适用场景

• 基于 React 的 SPA PC 项目。

官网地址

• Ant Design 文档
• Ant Design Github

Ant Design of Vue

简介

• Ant Design of Vue 是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
• 如果你想从 Element UI 转走，可以考虑此 UI 框架，也可考虑 Vuetify。
• 免费开源，组件丰富，样式风格简约，文档讲解详细，上手简单，Github 的 Star：11.4k。

适用场景

• 基于 Vue 的 SPA PC 项目。

官网地址

• Ant Design of Vue 文档
• Ant Design of Vue Github

Material-UI

简介

• 世界上最受欢迎的 React UI 框架（吹的），更快速、更简便的 web 开发。
• 免费开源，组件丰富，可看的界面主题丰富，相对于国内的 Element UI 或 Ant Design，文档不够直白，主要是由于国外的思维习惯和国人的不太一样。
• Github 的 Star：60.4k。

适用场景

• 基于 React 的 SPA PC 项目。

官网地址

• Material-UI 文档
• Material-UI Github

Vuetify

简介

• Vuetify 是一个 Vue UI 库，包含手工制作的精美材料组件。不需要设计技能 - 创建令人惊叹的应用程序所需的一切都触手可及。
• Vuetify 是 Vue.js 的头号组件库，尤小右的推荐，可以直接使用 vue add vuetify 安装。
• 免费开源，组件丰富，相对于国内的 Element UI 或 Ant Design，文档不够直白，主要是由于国外的思维习惯和国人的不太一样。
• Github 的 Star：27.2k。

适用场景

• 基于 Vue 的 SPA PC 项目。

官网地址

• Vuetify 文档
• Vuetify Github

Vant

简介

• 轻量、可靠的移动端 Vue 组件库。
• 免费开源，组件丰富，样式风格简约，文档讲解详细，上手简单，Github 的 Star：14.7k。
• 体验极佳，目前是我认为基于 Vue 的 H5 UI 框架中最好之一。

适用场景

• 基于 Vue 的 SPA H5 项目。

官网地址

• Vant 文档
• Vant Github

Vant Weapp

简介

• Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
• 免费开源，组件丰富，样式风格简约，文档讲解详细，上手简单，Github 的 Star：13.4k。

适用场景

• 微信小程序项目。

官网地址

• Vant Weapp 文档
• Vant Weapp Github

MUI

简介

• 最接近原生 APP 体验的高性能前端框架。
• 免费开源，组件丰富，样式风格简约，文档讲解详细，上手简单，Github 的 Star：12.9k。
• 优秀的 Dcloud 平台的一款产品，不过在开发 Hybrid APP 还存在一些 BUG，可以为 WebApp 提供页面切换效果，前提是你使用的打包平台是 Dcloud。

适用场景

• 5 + APP 项目。
• WebApp 项目。

官网地址

• MUI 文档
• MUI Github

Uni-UI

简介

• uni-ui 是 DCloud 提供的一个跨端 ui 库，它是基于 vue 组件的、flex 布局的、无 dom 的跨全端 ui 框架。
• uni-ui 不包括基础组件，它是基础组件的补充。
• 免费开源，样式风格简约，文档讲解详细，上手简单，Github 的 Star：742。
• 优秀的 Dcloud 平台的一款产品，如果你使用 uni-app 框架开发跨多端项目，那么此 UI 框架可以是你的好帮手。
• 跨多端方案：
  • 基于 Vue 的跨多端方案 uni-app。
  • 基于 React 的跨多端方案 taro。

适用场景

• 基于 Vue 的跨多端项目，例如：跨 APP 端（Android 和 IOS），小程序端，H5，快应用。
• 单个端项目。

官网地址

• Uni-UI 文档
• Uni-UI Github

WeUI

简介

• 这是一套基于样式库 weui-wxss 开发的小程序扩展组件库，同微信原生视觉体验一致的 UI 组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。
• 免费开源，样式风格简约，文档讲解详细，上手简单，Github 的 Star：24.9k。
• 微信小程序的官方 UI 组件库。

适用场景

• 微信小程序项目。

官网地址

• WeUI 文档
• WeUI Github

iView Weapp

简介

• 一套高质量的微信小程序 UI 组件库。
• 组件丰富，样式风格简约，文档讲解详细，上手简单，Github 的 Star：5.7k。

适用场景

• 微信小程序项目。

官网地址

• iView Weapp 文档
• iView Weapp Github

MINE-H5-UI

简介

• 一款轻量级、模块化基于 VUE 的 H5 前端 UI 组件库。
• 样式风格简约，文档讲解详细，上手简单，Github 的 Star：1（还是作者自己点的）。
• 1.x 版本的组件源码过于简单，你可以直接复制你所需要的组件文件夹，复制到你的项目中的 components 目录即可使用，从而可以修改组件内容来满足你的需求。

适用场景

• 基于 VUE 的 SPA H5 项目。

官网地址

• MINE-H5-UI 文档
• MINE-H5-UI Github