Vue3 组件库 | Varlet v2.0.0 发布了 🎉🎉🎉

写在前面

经过了社区贡献者们的两个月努力，Varlet 的 2.0 版本终于发布了！ 🎉🎉🎉，这次版本更新主要是对组件库整体做了一次重构和细节优化，同时撇去了一些技术债务(舒服了舒服了)。主要的变更看下面！

组件库(@varlet/ui)

组件特性变更

• Menu 组件进行了重做，优化了 api 使其变得更易使用，在桌面端也有更优秀的边界检测能力和性能。具体使用方式参考 Menu 文档，
• Select 组件的下拉菜单替换成了新版 Menu 组件
• Pagination 组件的下拉菜单替换成了新版 Menu 组件
• Loading 组件的默认颜色从 currentColor 更改为 var(--color-primary)
• Loading 组件暴露出 var(--loading-color)
• Button 组件新增 loadingColor 属性
• Snackbar 组件新增 loadingColor 属性
• Progress 组件新增 labelClass 属性
• StyleProvider 组件新增 tag 属性，允许自定义容器标签
• Cell 组件重命名了部分 api desc -> description， descClass -> descriptionClass
• DatePicker 组件重命名了部分 api shadow -> elevation
• TimePicker 组件重命名了部分 api shadow -> elevation
• Card 组件重命名了部分 api height -> image-height，content -> floating-content
• Col 组件新增 direction 属性
• Dialog 组件新增 width 属性

组件样式变量变更

• Menu 组件变量新增 --menu-background-color
• Select 组件变量新增 --select-select-min-height，--select-menu-margin-top
• Pagination 组件变量新增 --pagination-simple-padding
• Loading 组件变量新增 --loading-color
• Cell 组件变量重命名 --cell-desc-font-size -> --cell-description-font-size，--cell-desc-color -> --cell-description-color

UMD 模块优化

在 1.x 版本中，UMD 模块不包含英文语言包和暗黑模式主题包。在 2.x 版本中，我们将其进行了内置

移除 less 主题变量的支持

如今 css variable 方案已经十分成熟，在 2.x 版本中不再支持 less 主题变量，这有利于减小包的发布体积。 如果您使用了在构建时替换 less 主题变量的方案，需要替换成 css variable 方案

Typescript 类型优化

我们对组件内部类型进行了重构，抽象了更多的类型并且暴露了出来，组件的类型规范依照组件名 + 类型名的形式，对用户的心智更加友好。

支持自动引入函数组件

在 1.x 中，组件库只支持自动引入在模板中的声明式组件，函数组件 (例如: Snackbar) 仍然需要手动引入样式文件。 在 2.x 中，通过 unplugin-auto-import 插件支持了函数组件的自动引入(现在是真的全自动引入了)

组件库快速成型工具(@varlet/cli)

唠唠家常

社区的同学们对 @varlet/cli 的热情比我想象的要高涨很多，也有几个同学找到我秀出了他们自己的组件库作品，也同时提出了一些意见。所以我们这次更新也对这一套组件库开发的工具链做了一点优化

命令重构

• 重构了 gen 和 create 命令，增加了 sfc 和 tsx 两种风格的模板选择，增加了国际化的选项，优化了命令行交互体验
• 重构了 compile 命令，编译后的包不再支持 less 变量
• 新增 vite:dev 和 vite:build 命令，对 vite 进行了基本的封装

文档相关

• 新的文档首页
• 优化了文档视觉
• 文档样式变量进行了一些重命名

结尾

本来是想偷偷发布，不打算写文章的，因为实在不知道应该写什么。但是呢！感觉还是要有一些仪式感！在此感谢一下贡献了不少代码和意见的老同学和新同学们！抱拳了！

官方文档地址: varlet.gitee.io/varlet-ui/, github地址: github.com/varletjs/va…