Varlet-Cli | Vue3组件库快速成型工具

8,905 阅读3分钟

相关地址

Varlet官方文档
Varlet-Cli官方文档
Varlet Github

写在前面

大家好!好久不见!这次的主题是给大家带来了一款能够帮助大家快速开始组件库开发的工具,能够大幅降低组件库的开发门槛,提升质量,先来看演示......

C82FF549-4603-4047-8919-E6EC5E54CF16 2.png

21B4EACA-B2EF-4788-9444-72013897567A.png

大伙儿不用太在意组件库的名字,纯粹是一拍脑门写上去的,这个案例项目就是通过varlet-cli生成的, varlet-cli提供了调试环境,组件库代码编译,文档站点打包,单元测试,代码检查,代码发布,更新日志生成等一系列功能,帮助你把所有开发精力都放在组件本身上面,varlet-ui也升级到了最新版本的varlet-cli, 也有了明显的体验提升。

快速开始

yarn global add @varlet/cli
varlet-cli gen 文件夹名
cd 文件夹名
yarn
yarn dev

gen命令提供了.vue文件tsx两种组件库开发风格的预设, 选择之后你就有了一个Vue3组件库项目,安装好依赖然后就可以启动服务器直接开始组件的开发了...

命令相关

启动开发服务器

varlet-cli dev

构建文档站点

varlet-cli build

构建组件库代码

varlet-cli compile

执行所有的单元测试

varlet-cli test

以watch模式执行单元测试

varlet-cli test -w

检查代码

varlet-cli lint

快速创建一个组件文件夹

varlet-cli create <componentName>

生成一个项目模板

varlet-cli gen <projectName>

代码发布以及更新日志相关的命令集成在了项目模板中, 大家有兴趣可以自行查看, 更多用法和配置详情看这里Varlet-Cli官方文档

随便聊聊

最初的varlet-cli只是我们内部在使用的,并没有对外暴露的想法,直到varlet-ui发布以来,很多社区的小伙伴来问我,你们的组件库文档是用什么做的呀?, 我想用来写技术文档啦(虽然当时我满脑子黑线, 心想还是组件库本身不够优秀,大家的关注都在文档上面...)。 过了一个月我工作调动到了新的岗位,负责前端架构方面的工作,也有了做私有化组件库的想法。既然已经有了现成的经验,不如就把他重新设计,让他能够cover更多的案例。在实践中发现效果还不错,也就顺手补全了文档跟大家见面,因为经常在掘金潜水,发现很多社区的小伙伴对组件库的开发也是很感兴趣的,我希望varlet-cli也能够成为大家上手组件库开发的一个敲门砖。

写在最后

使用过程中遇见问题可以到issue列表提出你的问题, 我们解决issue的速度还是很快的。 同时欢迎成为我们的贡献者给我们发pull request, 最后的最后,star一下Varlet, 开源不易,全靠鼓励。