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

Element UI

在这里插入图片描述

简介

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

适用场景

  • 基于 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 项目。

官网地址

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页