Varlet Vue3 组件库 3.2 发布 | 拥抱 Nuxt、桌面端体验增强、支持原子化框架

写在前面

自上一篇文章 Vue3 组件库 Varlet v3.0.0 发布了！支持 Material Design 3 已经过去了一个月了，这一个月我们收到了不少的用户反馈，主要的几个关键词是：Nuxt3、Material Design 3 主题配色、桌面端支持、unocss 支持、tailwindcss 支持，为了不辜负期待，所以我们在这一个月的时间里针对其做了一些更新。

桌面端支持

作者为不了解 varlet 的同学们简单介绍一下，varlet 是一个同时支持 material design 2 和 material design 3 设计系统的移动端组件库 。可能有同学会产生疑问，移动端组件库有可能支持桌面端应用么？答案是肯定的。作者早年一直是 vant2 的使用者，早在那个时期 vant 就已经通过自定义 touch 事件的方案解决了这一问题。varlet 初期也借鉴了这种设计，详细可以参考源码，很容易理解。

简单来说，varlet 一开始就是支持桌面端的，但是体验一般，只能说是勉强能用

桌面端体验增强

简单分析一下移动端组件在桌面端上的先天不足。

键盘交互缺失
组件 tab 导航缺失
组件 focusing 反馈缺失
组件 hovering 反馈缺失

这里举几个简单的例子，让同学们直观感受一下

下拉菜单通常情况是允许通过键盘上下左右进行选择的，空格回车是允许选中的，esc 是允许关闭的
单选框组通常情况是允许通过键盘上下左右进行切换选项的
模态框通常情况是允许通过 esc 关闭的，且需要按照弹出的顺序逆序进行关闭(后弹出的先关闭)
还有非常非常非常非常非常多......

这些场景在移动端应用中基本上不会出现，但是在桌面端应用中是必须要支持的。所以我们也为此付出了非常多的努力，最终使用侵入性较小的方式支持了大部分场景，并且差异化了移动端和桌面端，目前体验良好～

顺道一提的作者感受：也无怪一部分用户喜欢用 varlet + Nuxt3 来做桌面端的 C 端应用。material design 本就是支持全平台的设计系统，尤其是 material design 3，尽可能的深入了解之下才发现设计师的很多巧思和权衡。

Nuxt3 Module

为了提升 varlet 在 Nuxt3 中的使用体验，组织内的同学开发了对应的 Nuxt Module。内置了组件、指令按需自动引入的能力。未来还有更多的能力欢迎大家帮助完善，目前相对稳定，不久之后就会成为 varlet 官方首要推荐的 nuxt 集成方案。

顺便一提也是因为这个 Module，varlet 蹭上了今年 vuejs amsterdam 会上的分享讲稿，开源工作者的小快乐总是会源于这些地方～

UnoCss / Tailwindcss 原子化框架支持

在工程中使用了原子化框架的用户总会产生一个问题，就是无法将组件的样式变量平滑的整合到工程变量中。我们为此提供了相关的预设（unocss / tailwindcss 都有对应的预设）并解决了这个问题。开发者将可以使用类似下面的方式去访问 varlet 的基础样式变量，并且 Layout 组件的响应式断点也做了一致化处理。

html 复制代码

<template> 
  <div class="text-on-primary bg-primary text-md">hello</div> 
  <div class="text-on-primary-container bg-primary-container text-lg">world</div> 
  <div class="bg-primary sm:bg-info md:bg-warning lg:bg-danger xl:bg-success">
    varlet
  </div> 
</template>

主题配色生成器

varlet 从 3.x 起开始支持 Material Design 3。在带来更强的视觉效果的同时，md3 相对于 md2 的色彩搭配难度会更高（对设计师的要求也更高）。所以谷歌官方开源了相关的色彩生成算法去解决这个问题。用户只需要通过一张产品图片，或者一个主题颜色就可以为其生成一套搭配和谐的配色。我们也因此创建了一个为 Varlet Material Design 3 服务的色彩生成器的仓库去分享给大家使用。

tips: 工具站点目前部署在 github pages，可能会受一些众所周知的原因访问不了，有需要的同学可以自己部署镜像。

结语

开源不易，希望能帮助到大家的工作、学习和生活。我们也想尽可能的多去做一些实在的事情。同时也欢迎大家参与开源共建(不仅限 varlet)。支持我们的工作可以给我们点上一个 star，我们会因此感到开心快乐。出现了使用上的问题欢迎给我们留 issue，我们会尽能力第一时间处理。

github 仓库地址: github.com/varletjs/va... 文档地址: varlet.gitee.io/varlet-ui/#...