基于 Vite 的组件库工程化实战
5.98
1:1 还原开源前端组件库搭建全过程
公众号: 前端大班车
学习群
免费试学
限时优惠价 0 元 倒计时 0 天 0:0:0
.99
2054 人加入学习
21 小节
·
约 379分40秒
免费试学
介绍
目录
评论

作者介绍

作者简介(2100x389).jpg

全栈然叔

  • Vue3.0 Contributor;
  • 全栈工程师、架构师;
  • 掘金优秀创作者 Lv5;
  • Github China Top500;
  • 16年项目开发管理经验;
  • 项目: 711电子商务系统;
  • 持续学习者。

小册介绍

课程介绍(1624x623).jpg

前端工程化一直是前端圈大热的话题,诚然在一个项目框架和各种脚手架都趋于成熟的年代。一个前端小白几乎可以在不具备任何工程化知识的情况下,利用成熟的脚手架搭建一个前端应用。里面的工程化细节也无需过多去关心。

当然这只是限于初级的程序员,一旦项目趋于复杂,会提出各种定制化的要求,或者引入新的技术,也或许需要更过兼容性和性能提升的要求,这就需要不断地修改自己的工程化方案进行适应。

如果要弄懂工程化,动手实践是学习的最好方式。 如果你想弄懂什么东西就最好自己亲手造一个,最好的轮子应该就是组件库了。组件库的搭建过程,就是一个完美的工程化实践。 从项目的搭建,选择合适的开发服务,配置代码验证规则,到最后的集成发布,整个生命周期都蕴含着大量工程化知识。

image.png

去年我们 【花果山团队】进行 element3 组件库的开发工作,也曾经把 Element 工程化的过程用文章进行过总结(Vue3组件库工程化实战 -- Element3),受到了很多读者的好评,跟着然叔搭建一遍,很快就 Get 了组件库搭建这个技能。

今年然叔决定对组件库的工程化搭建过程进行一次更加系统的整理,并且使用最新的 Vite 技术栈。实现一个可以实操的前端组件库项目,1:1 还原主流组件库的工程化搭建过程,再配上详细的步骤说明和基础知识讲解。带你从一个只会写业务的前端小白进阶为前端工程化搭建高手。

img

课程安排

实战的关键在于如何营造一个逼真的学习环境。

这门课程遵循两个原则:

  • 造轮子思想 - 通过实战模拟一个真实的组件库开发;
  • 敏捷开发方式 - 每节一个主题持续迭代。

我也看过很多工程化实战的文章和资料,大多数都是将各种技术一次性组装在一起。我觉得这样并不利于学习,即使是实战也不是一个好的实践方案,一个项目的工程化是慢慢积累和迭代出来的。所以本次课会遵循敏捷开发原则,从一个MVP(最小化可行产品)开始每个小节添加一个特性。每个小节都是从一个User Story开始展开。希望通过这样的的方式给大家一个最佳的实战体验。

你会学到什么?

  • 从 0 到 1 完成一套组件库工程化的搭建;
  • 学会利用迭代思维和 MVP 开发项目;
  • 学会制定项目规范和用自动化工具进行检查;
  • 学会运用测试驱动开发 TDD;
  • 学会使用 Github Action 完成 CI/CD
  • 学会前端软件包的发布方法。

总之,通过这门课程的学习,你将获得一次真实组件库搭建的实战经验;系统化理解各种工程化工具的配置过程和实践经验;以及获得完整的案例设计以及即插即用的案例代码,可用于指导日常开发过程的常见业务场景和实现方法。

目标用户画像&&学习目标

  • 只会写业务,不会搞架构的前端小伙伴。
  • 闻到 Vite 香气,还不能品尝 Vite 生态硕果的同学们。
  • 希望系统化学些前端工程化知识,找不到实战项目的同学们。

学习环境 / 语言

Javascript / Vscode / Github

购买须知

  1. 本小册为图文形式内容服务,共计 21 节;
  2. 全部文章已经更新完成;
  3. 购买用户可享有小册永久的阅读权限;
  4. 购买用户可进入小册微信群,与作者互动;
  5. 掘金小册为虚拟内容服务,一经购买成功概不退款;
  6. 掘金小册版权归北京北比信息技术有限公司所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表,违者将依法追究责任;
  7. 在掘金小册阅读过程中,如有任何问题,请邮件联系 xiaoce@xitu.io
推荐小册
京ICP备18012699号-3 ©版权所有 北京北比信息技术有限公司

公司地址:北京市海淀区信息路甲28号13层B座13B-5 | 公司座机:010-83434395