全新的Vue 3 UI框架介绍

510 阅读6分钟

今天,我将谈论另外五个全新的Vue 3 UI框架,它们配备了大量出色的组件(例如,导航条、输入和复选框),可以帮助你毫不费力地构建界面或自己的组件。此外,这些框架中的一些带有函数、插件和指令,可以在你的UI上抽象出一整层的复杂性,比如懒人加载、无限滚动和去重等等。

Oruga UI

Screenshot of Oruga UI homepage

在我之前的文章中,Oruga UI被提到是一个 "最值得期待的UI框架"。这是因为Oruga从Vue 2开始就提供了轻量级和不显眼的组件,这一良好的趋势在新的Vue 3版本中得到了延续。

Oruga提供的组件专注于功能而非风格,这使得它成为一个坚实的基础,你可以在此基础上构建自己的组件。

在他们的网站上,Oruga接受了一个独特的理念。"[我们]希望你只关注你的应用程序的UI/UX方面,并且完全灵活地适应未来的变化,而不需要触及任何一行JavaScript。"

这说明Oruga提供了一个没有意见的环境,在这个环境中你可以建立任何你想要的东西。他们通过在网站上提供一个CSS切换器将这种想法提升到了一个新的高度;这个切换器有能力启用和禁用他们在文档上的自定义CSS,让你在查看组件时不应用任何默认样式。

如果我正在寻找一个漂亮的、极度可定制的组件包,我可以在上面应用我自己的风格或设计系统,我会选择Oruga作为一个框架。另外,即使我想编辑默认的样式,Oruga也允许这样做,有大量的CSS变量等待接收自定义样式来覆盖或加强。Oruga在设置和定制方面提供了一个很好的体验。

Vuestic UI

Screenshot of Vuestic homepage

Vuestic以制作最漂亮的、开源的Vue管理面板而闻名。他们擅长编写可维护的Vue代码,并精心制作光滑的组件和界面。

该团队最近宣布了Vuestic UI,他们的Vue 3 UI框架,包含了流行的Vuestic管理界面中使用的所有组件以及更多。Vuestic强调了它对键盘导航的开箱即用的支持,由于它所提供的用户体验,这一功能在前端社区很受重视。

Vuestic提供了50多个具有独特功能和广泛配置性的组件。响应性的设计,这些组件几乎适合每一个屏幕。Vuestic在整个框架中提供了无缝的翻译支持和键盘可访问性。

Vuestic已经通过其漂亮的组件目录确立了自己作为最美观的Vue 3 UI框架之一的地位。他们现在正以良好的速度创建更复杂的组件,如日期选择器或数据表,这肯定会像他们目前提供的产品一样具有创造性。

如果你想建立好看又实用的组件,Vuestic将完全适合你的应用程序。由于高度的可定制性,这些组件在设计上是响应式的,并将适合于任何主题。

Naive UI

Screenshot of Naive UI homepage

Naive UI在Twitter上谦虚地向世界宣布的,然后被Vue的创建者转发,这给这个新的组件库带来了大量的流量。现在,Naive UI在成立不到三个月的时间里就在GitHub上获得了当之无愧的4.7k颗星。

它提供了70多个精心制作的组件,可以无缝地融入几乎所有类型的Vue 3应用中。Naive的组件性能良好,可定制性极强,并有一流的TypeScript支持,提供了良好的开发体验。

文档网站易于浏览,并有完整的定制输入,以帮助开发人员预览组件在他们自己的主题中的外观。你可以玩玩这些选项,用颜色模式和字体创建你自己的完整主题。这个定制的主题可以被下载并轻松地添加到你的应用程序中,以覆盖默认的内容。

在Naive的大型组件库中,所有的组件都是树状的,支持深色和浅色的主题,并提供了大量的道具和事件,可以为你自己的复杂组件制作一个骨架,或者无缝地集成到你自己的应用程序中。

Naive几乎提供了开发一个成熟的Vue 3应用程序所需的一切。每个组件都是快速和一致的,数据显示的组件具有很好的懒惰加载能力。

我会选择Naive来增强我的Vue应用,而不影响速度或任何现有组件。

Varlet UI

Screenshot of Varlet UI homepage

Varlet UI是一个用于Vue 3的Material Design移动组件库。它可以被看作是著名的VuetifyUI框架的一个面向移动的兼容版本。

Varlet拥有40个轻量级和高质量的组件,并具有强大的TypeScript、SSR和国际化支持。Varlet依靠Material Design,这在移动体验中已经非常成熟,让你的用户在学习组件的工作过程中领先一步。

Varlet的组件的树形可动性使它们变得轻巧和容易使用。此外,Varlet提供了一个IDE设置指南和一个扩展,以提高开发者的生产力。

如果我想拥有漂亮的、响应式的Material Design组件,并偏向于移动用户界面,Varlet是我的选择。

Vant UI

Screenshot of Vant homepage

Vant UI提供了超过65个轻量级、可重用的组件。Vant的组件以适应移动使用而闻名,并以其完全可定制的能力而闻名。Vant是Ionic框架的一个强有力的竞争者,它提供罕见的组件,如密码输入、倒计时、拉动刷新、通知等。

在浏览了Vant的组件目录后,很明显他们专注于小型设备,但保持足够的灵活性,可以扩展到网络应用。值得一提的是,这些组件都是树状的,因此,它们可以被单独导入到你的应用程序中。

Vant有一个广泛的文档网站,具有大量的演示、事件API、槽API、代码示例,甚至是边缘案例。Vant还提供了类型化的组件来帮助完成代码,并支持SSR、主题化和国际化,使其成为大多数开发者的无懈可击的解决方案。

如果你需要建立一个在移动端看起来很棒的应用程序,Vant将是非常棒的。这些组件可以完美地适用于任何PWA,并使你的网络应用感觉是原生的,没有太多的麻烦。

总结

随着Vue的飞速发展,它有机地提出了更好的库和框架,因为作者有一个强大的、高性能的、广泛的API可以依靠。现在,开发者可以想出更多创造性的方法来促进用户界面的创建,同时打破他们之前遇到的大部分限制。

由于Vue对前端开发者最重要的细节(开发者体验、性能、反应性和状态管理,仅举几例)的敏锐态度,可以说整个Vue生态系统在未来几年值得密切关注。