Vue3组件库 | Varlet 解锁 3000 star 🎉🎉，准备进行 2.0 版本的升级，附组件库问题分析

写在开头

同学们大家好呀，又是好长一段时间没有更新文章了。作者这段时间除了日常对组件库进行维护以外，还分散了一部分精力对低代码领域进行了一些研究（当然也是因为工作需要，顺便吐槽一句，真的是个大坑），所以比较难有更多精力去产出文章。

在一个周六的午后作者点开 Varlet 的 star 页面发现已经有超过 3000 个星星了，作者十分高兴啊，在这普天同庆的日子里，不管怎么说也得抽点时间写篇文章糊弄一下（手动狗头）。顺便和社区关注Varlet 的各位同学汇报一下后续 Varlet 的开发计划，欢迎有兴趣的同学们来帮助我们一起完成这些事情。

2.0 版本的升级

为什么要升级 2.0 版本

自 Varlet 1.0 的版本发布时间开始已经过了一年多了，这一年我们经历了无数次的功能性更新和漏洞修复，并在一些实际线上场景下针对组件库的可用性和稳定性进行了多次的验证。可以说现在的版本相比于早期的1.0版本已经发生了本质的蜕变了。

我们目前的更新都是以保证兼容老版本为前提进行的，这样的做法会随着时间的推移产生一些技术债务。我们希望在2.0这个稳定版本中进行一次性的解决。适当的做一些破坏性变动，使 Varlet 更加合理和健壮。

修改方向

下面是我们总结出来的修改方向，抛砖引玉，欢迎社区的同学们给我们提出建议，如果合适，也会加入修改计划之中，当然我们也欢迎直接给我们提 pr

Vite 迁移到 3.x

在2022年7月13日，Vite团队发布了3.0版本，拥有更快的冷启动速度，更小的体积，以及更好看的官方文档，而且迁移成本也不高，这得上！

Pnpm 迁移到 7.x

Pnpm 作为一个包管理工具更新的速度是真的快，隔几天就在提醒作者该升级了，大概看了一下主要的变动，大多对于作者来说都不痛不痒。但是7.x版本优化了命令行参数的传递方式，还是很不错的（不过破坏性更新也不少），优先级暂时排最低 😬。

重构组件库Cli工具的 create 和 gen 命令

目前这两个组件库模版生成相关的命令可选择的模板风格比较少，满足不了大部分人的开发习惯，所以我们决定重构它，以选项的形式支持国际化，tsx，sfc 等不同风格组件库的开发范式

一些组件在特殊场景的优化

例如style-provider组件目前渲染的是一个div，如果用户需要它参与一些行内的布局就可能需要自行修改它的display了，所以我们需要让组件支持自定义 tag，以应对各种场景的布局要求。

一些组件在 props 名称的一致性上存在问题

例如 cell 组件 desc 的属性含义是描述或者详情，是 description 的简写。但是 desc 这个命名实际存在一些歧义，也存在降序的含义，虽然大部分用户在 cell 组件的使用场景下大概率也不会把它理解成降序，但是我们一致认为这样的问题是也是需要解决的，而且也不只有这一个组件有这样类似的问题，所以我们需要一并解决。

一些组件在默认颜色上存在问题

Varlet 的默认背景颜色是灰白色，默认文字颜色是黑色，默认的主题颜色是蓝色。在我们之前的设计里，所有组件都遵循这个规范设计颜色。但是我们没有考虑到一些实际的情况需求。

比如。。。

loading 的默认颜色按照规范应该是黑色，因为它的颜色需要跟随文字颜色而改变，但在单独使用或者对某一个容器进行加载就是类似如下的效果。因为文字颜色和 loading 没有对比导致容器内容没有重点。

所以我们会对所有组件的默认颜色的使用场景进行分析，做一个相对合理的设计。

Menu 组件在桌面端和平板上表现不佳

Menu 组件的问题在于为了使用的灵活性只提供了位置相关的偏移量，而没有提供placement，并且不支持自动的边界检测。在小手机的场景下是的确是够用了，但是对于桌面以及平板来说，就显得有点拉垮了。我们目前打算基于popoverjs来对它进行重写

部分组件的 api 存在简化的空间

例如目前 Rate 组件半星模式下需要传入一个半星显示的图标，这里的设计是有问题的，半星可以直接使用元素遮挡，裁切的方式实现，并不需要用户单独传入一个半星的图标，针对此类可以简化的 api，我们需要进行进一步的优化。

部分内部 api 没有显式的向外导出

例如tabs-items是一个支持横向滚动翻页的视图组件，他底层实际是基于 swipe 组件进行的一些封装，理应将 swipe 一些有用的 api 暴露出来，并且体现在文档上。

做出迁移指南

虽然我们2.0的升级主要目标还是稳定性的增强，和合理化的修改。不会引入新的特性，但是一定会伴随着一些破坏性变更，我们需要把这些变更以及对应的解决方法总结成一个迁移指南，以供开发者平滑的过渡。

提出你的想法

我们在正式开始动手之前会花一定的时间收集社区同学们的期望，可以来我们的仓库提issue友善的表达你的想法，我们保证不漏下一个issue进行评估，当然也欢迎有兴趣的同学们加入我们，直接给我们提pr帮助我们解决问题。下面是仓库的地址和官方文档。

github 官方文档

感谢这一年多参与开发的贡献者们

作者的力量是很微小的，十分感谢这些同学们的帮助。当然还有那些没有提交代码，但是给我们提供了很多不错思路和建议，帮助我们成长的同学们。非常感谢！再次强调我们是一个纯社区性质的组织，欢迎大家和我们一起开开心心自由的写代码，做真正喜欢做的事情。