前端组件库推荐 | 青训营笔记

381 阅读2分钟

一、前言

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 应用程序。

地址ant-design-vue

2.3 Arco Design Vue

概述

  • 智能设计体系,连接轻盈体验,字节跳动出品的企业级设计系统

地址arco-design-vue

2.4 vue-devui

概述

  • 一个基于 DevUI Design 的 Vue3 组件库

地址vue-devui

2.5 tdesign-vue-next

概述

  • 鹅厂优质 UI 组件,配套工具完满,设计工整,文档清晰

地址tdesign-vue-next

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