这门课解决什么问题

很多前端开发者在日常工作中都会遇到类似的困境：业务代码越写越臃肿，相似的弹窗、表单和按钮在多个项目里反复复制粘贴，一旦遇到需求变更，改一个基础组件就要牵连好几个项目的代码。这门课正是针对这种痛点，教你如何从零开始，用 Vue3 和 TypeScript 搭建一套专业级的企业组件库。它解决的不是“怎么写一个页面”，而是“怎么把重复的界面逻辑沉淀成可复用、可维护的底层资产”。如果你是技术负责人，学完后能统一团队的开发规范，彻底告别各业务线各写一套的混乱局面；如果你是普通开发者，掌握组件库的底层设计逻辑，也能大幅提升你在复杂业务场景下的架构能力。

适合什么基础与学完能做什么

这门资料并不适合纯零基础转行者。你需要对 Vue3 的基本语法（如组合式 API、响应式原理）和 TypeScript 的常见类型用法有初步了解，最好有一两个实际业务项目的开发经验。它的核心是带你跳出“写业务页面”的视角，进入“造轮子”的工程化思维。学完之后，你能够独立完成一个标准组件库的从零搭建：包括使用 monorepo 架构管理多个组件包，配置自动化代码规范工具来约束团队代码风格，用 JS 脚本实现严谨的 BEM 样式规范，以及从底层开始实现 Icon 等高频基础组件。这意味着你不仅能写出高质量的组件，还能把这套架构直接搬到公司内部，搭建起符合团队自身业务特点的内部组件系统。

资料怎么配合练习的建议

这套资料的视频内容有着明显的工程化推进逻辑，建议不要跳跃式观看，而是严格按照项目从无到有的搭建顺序来学。首先建议重点看工程环境搭建和 play 调试环境实现这两部分，这是很多人平时写组件时最容易忽略的基础架构，没有独立的调试环境，后续组件根本无法独立验证。其次，关于通过 JS 实现 BEM 规范以及 Icon 组件实现的部分，是这门课的硬核干货，强烈建议在看视频的同时，自己本地起一个空仓库，跟着一行行敲代码。不要只停留在看懂的层面，组件库开发的难点往往在于各种配置项的细节冲突和样式作用域的处理。把视频里的配置和组件实现自己在本地完整跑通一次，遇到报错先自己查文档解决，这样才能真正把这套工程化思维转化为自己的肌肉记忆。


前端开发工程师：希望深入掌握Vue3+TS技术栈，提升组件化开发能力的前端开发者。 UI/UX设计师：想了解组件库设计原理，实现设计语言到代码的高效转化的设计人员。 技术负责人：需要构建企业级组件库，统一团队开发规范，提高协作效率的技术管理者。 开源贡献者：有志于开发高质量开源组件库，提升个人技术影响力的技术爱好者。

课程目录

*   01 1.vue3组件库monorepo环境搭建.mp4 (74.94 MB), 15:28

*   02 2.实现组件play环境.mp4 (39.86 MB), 07:34

*   03 3.通过JS实现BEM规范.mp4 (86.96 MB), 16:57

*   04 4.实现icon组件.mp4 (172.10 MB), 33:26

*   05 5.icon组件的处理及样式处理.mp4 (68.75 MB), 13:06

*   06 6.eslint和prettier的配置.mp4 (97.77 MB), 16:20

*   07 7.组件库文档搭建.mp4 (73.42 MB), 13:52

*   08 8.实现树的基本搭建.mp4 (191.36 MB), 33:03

*   09 9.格式化树形结构.mp4 (130.37 MB), 18:19

*   10 10.拍平树结构.mp4 (159.02 MB), 23:24

*   11 11.树的结构展示.mp4 (241.42 MB), 33:23

*   12 12.实现树的展开和收缩.mp4 (88.99 MB), 11:51

*   13 13.实现树的异步加载.mp4 (270.17 MB), 37:07

*   14 14.实现树节点选择.mp4 (197.05 MB), 29:19

*   15 15.实现自定义节点.mp4 (167.41 MB), 24:34

*   16 16.实现树的虚拟滚动.mp4 (198.62 MB), 41:26

*   17 17.实现checkbox组件.mp4 (136.17 MB), 32:43

*   18 18.实现树中的checkbox展示.mp4 (98.47 MB), 18:14

*   19 19.实现树组件级联选择.mp4 (176.76 MB), 34:02

*   20 20.button组件.mp4 (115.40 MB), 28:35

*   21 21.button处理.mp4 (52.37 MB), 11:18

*   22 22.input组件样式及结构.mp4 (183.58 MB), 29:30

*   23 23.完善input组件功能.mp4 (144.44 MB), 31:08

*   24 24.实现formItem组件.mp4 (298.78 MB), 01:07:01

*   25 25.实现form组件.mp4 (270.06 MB), 01:00:06

*   26 26.上传组件的类型定义.mp4 (222.87 MB), 34:57

*   27 27.封装上传组件.mp4 (223.13 MB), 32:05

*   28 28.上传组件.mp4 (405.06 MB), 51:58

*   29 29.日历基本搭建.mp4 (442.84 MB), 01:04:03

*   30 30.实现日历组件功能.mp4 (341.85 MB), 47:29

*   31 31.基本结构.mp4 (127.15 MB), 28:36

*   32 32.根据范围渲染列表.mp4 (168.80 MB), 35:55

*   33 33.固定高度的实现.mp4 (288.19 MB), 52:37

*   34 34.实现动态高度.mp4 (157.84 MB), 27:30

*   35 35.虚拟列表总结.mp4 (25.08 MB), 05:17

*   课件资料.zip (15.55 MB)