从0搭建Vue3组件库(一): 开篇

前言

这是从0搭建Vue3组件库系列文章第一篇文章,这个系列我曾经写过多篇文章,但是写完之后回过头来再看里面有很多遗漏以及不足之处,所以决定重新梳理这个系列,并从头开始搭建一个完整的Vue3组件库工程项目,旨在为大家提供更详尽的搭建过程以及更好的阅读体验。

为什么要写组件库

目前业界已经有很多非常成熟的组件库了,比如Element,Vant,Vuetify等等等等,那么我们为什么还有去自己从头搭建一个呢?

对于我来说,搭建一个自己的组件库并不是为了给多少人去用(也没有多少人会去用),主要的还是从搭建过程中会学到很多工作中接触不到的知识。比如Vite的一些原理,pnpm包管理,脚手架搭建Cli,Vitest测试等等有很多的知识点。以及以这个为主题输出一些文章来帮助一些小伙伴答疑解惑,并且锻炼一下自己的写作能力。

我想对于大部分人来说搭建一个属于自己的组件库都是为了提高自己专业技能,或者说公司需要一个自己的组件库,亦或者说是你想把你的组件库做大做强然后开源出去获得更多人的使用与认可。当然,每个人有每个人不同的想法。幸运的是你们都看到了这篇文章,如果你想要搭建一个自己的组件库,那么请你一定要关注本系列文章。

vue3组件库

从0搭建Vue3组件库系列文章将使用Vite3+TS搭建一个Vue3组件库工程,最终产物是一个可直接用于搭建Vue3组件库的脚手架,即只需要你在命令行输入npm create easyest,那么你就能得到一个完整的Vue3组件库搭建框架。

至于其中的组件要不要写还是看后续的情况吧,可能会加一些常用组件的开发教程。同时每篇文章都会有对应github地址供大家查看。

包含哪些内容

从0搭建Vue3组件库系列文章暂时包含这些

• 《开篇》
• 《如何搭建Monorepo环境》
• 《组件库的环境配置》
• 《如何开发一个组件》
• 《集成ESLint+Prettier+Stylelint+Husky规范代码》
• 《如何使用Vite打包组件库》
• 《前端流程化控制工具gulp的使用》
• 《引入单元测试框架Vitest》
• 《使用 glup 打包组件库并实现按需加载》
• 《自动化发布、管理版本号》
• 《VitePress搭建组件库文档站点》
• 《搭建一个完整前端脚手架》
• ...

当然,后面可能会有所调整,但不会变化太多

最后

欢迎关注专栏Vite+TypeScript从零搭建Vue3组件库

希望我的文章能够帮助大家学到更多的东西,一起学习共同进步，加油！

当然也请大家能给我点赞收藏加关注给点鼓励

今天情人节,jym早点下班去陪女朋友~