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

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

biaov

3847人浏览 · 2020-08-25 17:04:53

biaov · 2020-08-25 17:04:53 发布

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 项目。

官网地址

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 项目。

官网地址

Ant Design

在这里插入图片描述

简介

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

适用场景

基于 React 的 SPA PC 项目。

官网地址

Ant Design of Vue

在这里插入图片描述

简介

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

适用场景

基于 Vue 的 SPA PC 项目。

官网地址

Material-UI

在这里插入图片描述

简介

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

适用场景

基于 React 的 SPA PC 项目。

官网地址

Vuetify

在这里插入图片描述

简介

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

适用场景

基于 Vue 的 SPA PC 项目。

官网地址

Vant

在这里插入图片描述

简介

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

适用场景

基于 Vue 的 SPA H5 项目。

官网地址

Vant Weapp

在这里插入图片描述

简介

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

适用场景

微信小程序项目。

官网地址

MUI

在这里插入图片描述

简介

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

适用场景

5 + APP 项目。
WebApp 项目。

官网地址

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，快应用。
单个端项目。

官网地址

WeUI

在这里插入图片描述

简介

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

适用场景

微信小程序项目。

官网地址

iView Weapp

在这里插入图片描述

简介

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

适用场景

微信小程序项目。

官网地址

MINE-H5-UI

在这里插入图片描述

简介

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

适用场景

基于 VUE 的 SPA H5 项目。

官网地址

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^