一、前言
UI组件库是指包含了多个可重用的用户界面组件的预先构建集合,它可以帮助前端开发人员快速构建界面,并保持界面的一致性和可维护性。
通常,UI组件库提供了常见的UI组件,如按钮、输入框、下拉框、菜单、弹出框等,它们都会有一定的样式和交互行为。开发人员可以直接使用这些组件,而无需重头开始编写代码。此外,UI组件库通常还提供了一些基础的样式,如颜色、字体、布局等,以及一些抽象的组件,如表单验证等。
通过使用UI组件库,开发人员可以节省大量的时间和精力,提高生产效率。同时,UI组件库还能够帮助保持界面的一致性,提高UI的质量和可维护性。
二、PC端
概述:目前推荐的是适配vue3版本的组件库,自认为做的比较好的
2.1 Element Plus
概述:
- Element Plus 是一个基于 Vue 3 的 UI 组件库,是 Element UI 团队为了适配 Vue 3 而推出的版本。它提供了一系列的优秀组件,能够帮助开发者快速搭建现代化的 Web 应用程序。
地址:element plus
2.2 ant-design-vue
概述:
- Ant Design Vue 是 Ant Design 团队开发的一款基于 Vue.js 的 UI 组件库,Ant Design 团队是由阿里巴巴集团的蚂蚁金服部门所创建的。
- Ant Design 团队在 UI 设计和前端开发领域有着丰富的经验,他们致力于提供一系列高质量、易用、美观的 UI 组件库,帮助开发者快速构建出优秀的 Web 应用程序。
2.3 Arco Design Vue
概述:
- 智能设计体系,连接轻盈体验,字节跳动出品的企业级设计系统
2.4 vue-devui
概述:
- 一个基于 DevUI Design 的 Vue3 组件库
地址:vue-devui
2.5 tdesign-vue-next
概述:
- 鹅厂优质 UI 组件,配套工具完满,设计工整,文档清晰
2.6 nutui
概述:
- 京东风格的移动端 Vue2、Vue3 组件库 、支持多端小程序(A Vue.js UI Toolkit for Mobile Web)
地址: nutui
三、移动端
3.1 vant
概述:
- vant 是有赞公司(Youzan)开发的一套基于 Vue.js 的轻量级移动端组件库,包括了常用的表单、布局、导航、弹窗等组件,覆盖了移动端应用开发的常见场景,极大地提高了移动端开发的效率和质量。
地址:vant
3.2 varlet
概 述:
- Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库,全面拥抱 Vue3 生态,由社区团队维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化,并提供 VSCode 插件保障良好的开发体验
地址:varlet