你会学到什么？
- 从 0 到 1 完成一套组件库工程化的搭建；
- 学会利用迭代思维和 MVP 开发项目；
- 学会制定项目规范和用自动化工具进行检查；
- 学会运用测试驱动开发 TDD；
- 学会使用 Github Action 完成 CI/CD
- 学会前端软件包的发布方法。
总之，通过这门课程的学习，你将获得一次真实组件库搭建的实战经验；系统化理解各种工程化工具的配置过程和实践经验；以及获得完整的案例设计以及即插即用的案例代码，可用于指导日常开发过程的常见业务场景和实现方法。
课程简介
前端工程化一直是前端圈大热的话题，诚然在一个项目框架和各种脚手架都趋于成熟的年代。一个前端小白几乎可以在不具备任何工程化知识的情况下，利用成熟的脚手架搭建一个前端应用。里面的工程化细节也无需过多去关心。
当然这只是限于初级的程序员，一旦项目趋于复杂，会提出各种定制化的要求，或者引入新的技术，也或许需要更过兼容性和性能提升的要求，这就需要不断地修改自己的工程化方案进行适应。
如果要弄懂工程化，动手实践是学习的最好方式。 如果你想弄懂什么东西就最好自己亲手造一个，最好的轮子应该就是组件库了。组件库的搭建过程，就是一个完美的工程化实践。 从项目的搭建，选择合适的开发服务，配置代码验证规则，到最后的集成发布，整个生命周期都蕴含着大量工程化知识。
去年我们 【花果山团队】进行 element3 组件库的开发工作，也曾经把 Element 工程化的过程用文章进行过总结（Vue3组件库工程化实战 — Element3），受到了很多读者的好评，跟着然叔搭建一遍，很快就 Get 了组件库搭建这个技能。
今年然叔决定对组件库的工程化搭建过程进行一次更加系统的整理，并且使用最新的 Vite 技术栈。实现一个可以实操的前端组件库项目，1:1 还原主流组件库的工程化搭建过程，再配上详细的步骤说明和基础知识讲解。带你从一个只会写业务的前端小白进阶为前端工程化搭建高手。
课程安排
实战的关键在于如何营造一个逼真的学习环境。
这门课程遵循两个原则：
- 造轮子思想 – 通过实战模拟一个真实的组件库开发；
- 敏捷开发方式 – 每节一个主题持续迭代。
我也看过很多工程化实战的文章和资料，大多数都是将各种技术一次性组装在一起。我觉得这样并不利于学习，即使是实战也不是一个好的实践方案，一个项目的工程化是慢慢积累和迭代出来的。所以本次课会遵循敏捷开发原则，从一个MVP（最小化可行产品）开始每个小节添加一个特性。每个小节都是从一个User Story开始展开。希望通过这样的的方式给大家一个最佳的实战体验。
课程目录
1 开篇词：学习前端工程化就从搭建组件库开始
2 MVP原型系统： 将组件封装为组件库
3 CSS样式：用UnoCSS实现原子化CSS
4 文档建设：创建具备Demo示例功能的文档网站
5 单元测试(一)： 使用Jest进行前端单元测试
6 单元测试 (二)： 搭建Vitest的单元测试环境
7 规范化： Eslint + Prettier + Husky
8 软件包封装： 如何发布兼容多种 JS 模块标准的软件包？
9 持续集成 CI： 基于 github Action 的回归验证
10 开发许可证：维护自己的版权、拒绝拿来党
11 组件发布： 建立语义化版本与提交软件包仓库 Npm
12 建立组件库生态： 利用 Monorepo 方式管理组件库生态
13 按需引入: 实现组件库的按需引入功能
14 文档部署： 用 Vercel 部署你的线上文档
15 README： 编写标准的 README
16 品质保证：覆盖率测试报告
17 社区参与： 如何管理社区的 PullRequest？
18 敏捷开发： 用 Github 看板和 issue 管理需求
19 架构复用： 创建 CLI 工具提高研发体验
20 融入Vue 生态： 编写 vue-cli 插件让 Vue 用户找到你
21 结语
讲师介绍
全栈然叔
- Vue3.0 Contributor；
- 全栈工程师、架构师；
- 掘金优秀创作者 Lv5；
- Github China Top500；
- 16年项目开发管理经验；
- 项目: 711电子商务系统；
- 持续学习者。