作者介绍
全栈然叔
- Vue3.0 Contributor；
- 全栈工程师、架构师；
- 掘金优秀创作者 Lv5；
- Github China Top500；
- 16年项目开发管理经验；
- 项目: 711电子商务系统；
- 持续学习者。
小册介绍
前端工程化一直是前端圈大热的话题，诚然在一个项目框架和各种脚手架都趋于成熟的年代。一个前端小白几乎可以在不具备任何工程化知识的情况下，利用成熟的脚手架搭建一个前端应用。里面的工程化细节也无需过多去关心。
当然这只是限于初级的程序员，一旦项目趋于复杂，会提出各种定制化的要求，或者引入新的技术，也或许需要更过兼容性和性能提升的要求，这就需要不断地修改自己的工程化方案进行适应。
如果要弄懂工程化，动手实践是学习的最好方式。 如果你想弄懂什么东西就最好自己亲手造一个，最好的轮子应该就是组件库了。组件库的搭建过程，就是一个完美的工程化实践。 从项目的搭建，选择合适的开发服务，配置代码验证规则，到最后的集成发布，整个生命周期都蕴含着大量工程化知识。
去年我们 【花果山团队】进行 element3 组件库的开发工作，也曾经把 Element 工程化的过程用文章进行过总结（Vue3组件库工程化实战 -- Element3），受到了很多读者的好评，跟着然叔搭建一遍，很快就 Get 了组件库搭建这个技能。
今年然叔决定对组件库的工程化搭建过程进行一次更加系统的整理，并且使用最新的 Vite 技术栈。实现一个可以实操的前端组件库项目，1:1 还原主流组件库的工程化搭建过程，再配上详细的步骤说明和基础知识讲解。带你从一个只会写业务的前端小白进阶为前端工程化搭建高手。
课程安排
实战的关键在于如何营造一个逼真的学习环境。
这门课程遵循两个原则：
- 造轮子思想 - 通过实战模拟一个真实的组件库开发；
- 敏捷开发方式 - 每节一个主题持续迭代。
我也看过很多工程化实战的文章和资料，大多数都是将各种技术一次性组装在一起。我觉得这样并不利于学习，即使是实战也不是一个好的实践方案，一个项目的工程化是慢慢积累和迭代出来的。所以本次课会遵循敏捷开发原则，从一个MVP（最小化可行产品）开始每个小节添加一个特性。每个小节都是从一个User Story开始展开。希望通过这样的的方式给大家一个最佳的实战体验。
你会学到什么？
- 从 0 到 1 完成一套组件库工程化的搭建；
- 学会利用迭代思维和 MVP 开发项目；
- 学会制定项目规范和用自动化工具进行检查；
- 学会运用测试驱动开发 TDD；
- 学会使用 Github Action 完成 CI/CD
- 学会前端软件包的发布方法。
总之，通过这门课程的学习，你将获得一次真实组件库搭建的实战经验；系统化理解各种工程化工具的配置过程和实践经验；以及获得完整的案例设计以及即插即用的案例代码，可用于指导日常开发过程的常见业务场景和实现方法。
目标用户画像&&学习目标
- 只会写业务，不会搞架构的前端小伙伴。
- 闻到 Vite 香气，还不能品尝 Vite 生态硕果的同学们。
- 希望系统化学些前端工程化知识，找不到实战项目的同学们。
学习环境 / 语言
Javascript / Vscode / Github
购买须知
- 本小册为图文形式内容服务，共计 21 节；
- 全部文章已经更新完成；
- 购买用户可享有小册永久的阅读权限；
- 购买用户可进入小册微信群，与作者互动；
- 掘金小册为虚拟内容服务，一经购买成功概不退款；
- 掘金小册版权归北京北比信息技术有限公司所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表，违者将依法追究责任；
- 在掘金小册阅读过程中，如有任何问题，请邮件联系 xiaoce@xitu.io