Vue3 组件库 VARLET 主题编辑工具发布了🎉🎉🎉 | 都来参与开源吧，有点意思

前言

大家好，我是victor。最近参加了一个开源项目,做出了点东西觉得很有意思，和大家分享一下开源经历。请看下面：

Varlet UI theme editor

地址

应用地址： vike123.gitee.io/varlet-ute/… 仓库地址： github.com/varletjs/va…

介绍

Varlet UI theme editor 是一个基于 VARLET 开发的主题编辑工具, 由社区团队进行维护。 欢迎有想法的同学参与到项目中来，可以给我们 PR ，成为社区的一份子。 欢迎 STAR 和 ISSUSE ,同学们的反馈是我们前进的最大动力！

特性

• 🚀   提供 VARLET 组件库所有组件的主题编辑能力
• 🚀   导出的主题包十分轻量
• 💪   由国人开发，完善的中英文文档和后勤保障
• 💪   使用 VARLET CLI 构建，与 VARLET 官方文档的交互体验高度一致
• 🛠️   支持亮色和暗色两种主题定制
• 🌍   支持国际化

VARLET UTE 开发背景

大概在两个月前，由于工作原因，需要根据使用的 VARLET 组件库定制一套自己公司的组件样式。我本来以为这就是个小活，很快就可以结束，然而这件事我拉着设计师改了一个下午，因为官方只提供了样式变量的文档，但没有提供样式变量在线编辑的能力。

我就萌生了自己实现在线主题工具的想法，随即我通过 GITHUB 联系到了 VARLET 作者，经过一些交流，VARLET 作者表示在当前的生态中，在线主题编辑确实是空白的。所以我就着手开发了这款VARLET UI 主题编辑工具

VARLET UTE 开发过程

应用构建

首先我参考了其他组件库主题编辑工具的实现， 发现主题编辑工具和官方文档的 ux 一致性非常重要。 但是实现一套和官方文档 ux 有高一致性的应用成本较高， 在深思熟虑之后，我决定基于 VARLET-CLI 去构建应用。

主题生成

我当时想到生成主题包有两种方案， 一个是全量导出样式变量， 另一个是基于属性对比生成样式变量的补丁包。 为了生成的主题样式包更加轻量， 就选择了后者。

组件案例

关于组件使用案例，因为 VARLET 本身也是使用 VARLET-CLI 进行开发的，项目中有相当大可以复用和借鉴的部分。 所以我照抄了一份组件使用案例，集成到了编辑工具中。不过随之而来的问题是，官方部分案例可能不太适合去用作主题编辑的场景。所以之后的工作就是要 对所有的组件使用案例进行一次重构和优化，争取让用户在对组件样式调教的过程中得到更好的体验。

最后。。。

经历两个月空闲时的开发， 这款主题编辑工具原型终于成功上线， 非常感谢社区同学对这个项目做出的贡献。

关于开源门槛这件事

当时拉了一些社区同学来做这件事，很多同学都想参加，但觉得自己能力不够。其实开源没有什么门槛，是我们把这件事情想的太复杂，就好像自己给自己造了一条不可逾越的鸿沟，实际上当你开始的时候就已经超越了50%的人。社区同学后来是这么评价这件事情的。

第一次参与开源的感悟

我认为开源是对自己的一种鞭策和激励，开源不仅仅是把代码提上 GITHUB 或者 GITEE 。而是具体的去解决一个问题痛点，并坚持维护让更多的人享受便利，不再踩坑。

之前我也去做一些开源，有雄心壮志，想做一些惊天动地的事情。总觉得自己是生活的主角，生活就该围着我转。或许我也能像尤雨溪那样开发一款造福大众的框架，为此我也针对于自以为的痛点做了一些半成品。几乎所有的项目都无疾而终，大都是刚开始的时候信心满满，做到后来遇到瓶颈就放弃，看不到坚持下去的动力。

开源这件事都是用爱发电, GITHUB 目前有太多的开源项目，其中很大一部分已经几年没有提过代码了。从零到零点五是不难的，真正难的是从零到一。创建一个项目不困难，真正困难的是坚持打磨并维护下去，带着功利心是很难坚持下去的。

开源是为了解决自己遇到的痛点并为别人提供便利，因为自己淋过雨，所以想为别人撑伞。开源其实是个枯燥且乏味的过程，但总有那么一瞬间我们能找到属于自己的成就感。

感谢名单

放在最后感谢社区同学的付出与努力。我们一起用爱发电！