vant ui 官方文档_推荐一些你可能需要的 UI 组件库

最新推荐文章于 2025-04-23 11:31:46 发布

weixin_39700394

最新推荐文章于 2025-04-23 11:31:46 发布

阅读量8.6k

点赞数 1

文章标签： vant ui 官方文档 vue ui框架

本文介绍了多个基于Vue和React的UI组件库，包括Element UI、View UI、Ant Design、Ant Design of Vue、Material-UI、Vuetify、Vant、Vant Weapp、MUI、Uni-UI、WeUI和iView Weapp。每个组件库的特点、适用场景和官网地址均有提及，方便开发者根据项目需求选择合适的UI框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element UI

简介

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

•新的项目的话可以考虑其他的 UI 框架：

•vuetify^[1]•Ant Design of Vue^[2]

•Fork 一份自己维护。

适用场景

•基于 Vue 的 SPA PC 项目。

官网地址

•Element UI 文档^[3]•Element UI Github^[4]

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 文档^[5]•iView UI 2.x 文档^[6]•View UI Github^[7]•iView UI Github^[8]

Ant Design

简介

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

适用场景

•基于 React 的 SPA PC 项目。

官网地址

•Ant Design 文档^[9]•Ant Design Github^[10]

Ant Design of Vue

简介

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

适用场景

•基于 Vue 的 SPA PC 项目。

官网地址

•Ant Design of Vue 文档^[12]•Ant Design of Vue Github^[13]

Material-UI

简介

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

适用场景

•基于 React 的 SPA PC 项目。

官网地址

•Material-UI 文档^[14]•Material-UI Github^[15]

Vuetify

简介

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

适用场景

•基于 Vue 的 SPA PC 项目。

官网地址

•Vuetify 文档^[16]•Vuetify Github^[17]

Vant

简介

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

适用场景

•基于 Vue 的 SPA H5 项目。

官网地址

•Vant 文档^[18]•Vant Github^[19]

Vant Weapp

简介

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

适用场景

•微信小程序项目。

官网地址

•Vant Weapp 文档^[20]•Vant Weapp Github^[21]

MUI

简介

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

适用场景

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

官网地址

•MUI 文档^[23]•MUI Github^[24]

Uni-UI

简介

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

•基于 Vue 的跨多端方案 uni-app^[27]。•基于 React 的跨多端方案 taro^[28]。

适用场景

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

官网地址

•Uni-UI 文档^[29]•Uni-UI Github^[30]

WeUI

简介

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

适用场景

•微信小程序项目。

官网地址

•WeUI 文档^[31]•WeUI Github^[32]

iView Weapp

简介

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

适用场景

•微信小程序项目。

官网地址

•iView Weapp 文档^[33]•iView Weapp Github^[34]

MINE-H5-UI

简介

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

适用场景

•基于 VUE 的 SPA H5 项目。

官网地址

•MINE-H5-UI 文档^[35]•MINE-H5-UI Github^[36]

References

[1] vuetify: #vuetify[2] Ant Design of Vue: #antDesignVue[3] Element UI 文档: https://element.eleme.cn/#/zh-CN[4] Element UI Github: https://github.com/ElemeFE/element[5] View UI 4.x 文档: https://www.iviewui.com/[6] iView UI 2.x 文档: http://v2.iviewui.com/[7] View UI Github: https://github.com/view-design/ViewUI[8] iView UI Github: https://github.com/iview/iview[9] Ant Design 文档: https://ant.design/index-cn[10] Ant Design Github: https://github.com/ant-design/ant-design/[11] Vuetify: #vuetify[12] Ant Design of Vue 文档: https://www.antdv.com/docs/vue/introduce-cn/[13] Ant Design of Vue Github: https://github.com/vueComponent/ant-design-vue/[14] Material-UI 文档: https://material-ui.com/zh/[15] Material-UI Github: https://github.com/mui-org/material-ui[16] Vuetify 文档: https://vuetifyjs.com/zh-Hans/[17] Vuetify Github: https://github.com/vuetifyjs/vuetify[18] Vant 文档: https://youzan.github.io/vant/#/zh-CN/home[19] Vant Github: https://github.com/youzan/vant[20] Vant Weapp 文档: https://youzan.github.io/vant-weapp/#/intro[21] Vant Weapp Github: https://github.com/youzan/vant-weapp[22] Dcloud: https://www.dcloud.io/[23] MUI 文档: https://dev.dcloud.net.cn/mui/[24] MUI Github: https://github.com/dcloudio/mui[25] Dcloud: https://www.dcloud.io/[26] uni-app: https://uniapp.dcloud.net.cn/[27] uni-app: https://uniapp.dcloud.net.cn/[28] taro: https://taro.aotu.io/[29] Uni-UI 文档: https://uniapp.dcloud.net.cn/component/README?id=uniui[30] Uni-UI Github: https://github.com/dcloudio/uni-ui[31] WeUI 文档: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/[32] WeUI Github: https://github.com/Tencent/weui[33] iView Weapp 文档: https://weapp.iviewui.com/[34] iView Weapp Github: https://github.com/TalkingData/iview-weapp[35] MINE-H5-UI 文档: https://mineh5ui.biaov.cn/#/[36] MINE-H5-UI Github: https://github.com/biaov/MINE-H5-UI