从业务代码到组件库工程

大多数前端开发者日常的工作是调用现成的 UI 库，很少有机会从零构建一个。这门课解决的核心问题，是如何将散落在业务项目中的组件代码，重构为可独立发布、可灵活配置、具备完整样式体系的组件库。它不只是教你写几个 Vue 组件，而是聚焦于组件库开发的工程化落地，包括如何处理包管理、样式隔离、主题定制以及 API 设计。适合已经熟练掌握 Vue 3 组合式 API，并有一定 SaaS 或大型项目组件封装经验的开发者。如果你还在纠结 Vue 3 的基础语法，或者从未接触过 Sass 预处理，建议先补齐基础再来看这套内容，否则在工程配置和样式规范章节会感到吃力。

工程化配置与样式规范先行

建议优先学习前两个章节。第一章重点在于 monorepo 工作区的搭建，这是现代组件库开发的基石。你需要理解如何将组件库、演示项目、文档站点统一管理，并掌握全局注册与按需加载的实现机制。第二章涉及 SASS 规范，这里不是简单的写 CSS，而是建立一套可维护的命名空间、BEM 结构以及主题变量体系。这两个部分决定了你后续开发的组件是否容易维护，以及最终交付给其他团队时是否具备足够的扩展性。如果跳过这两章直接写组件，后期修改样式或调整主题时极易产生冲突，导致技术债务累积。

以 Button 组件为例贯穿始终

课程选取 Button 组件作为贯穿始终的案例，这非常务实。从基础渲染、主题切换、圆角、禁用状态，到加载动画、图标支持、插槽机制，再到 ButtonGroup 的组合使用，覆盖了组件开发中常见的交互与视觉细节。学完这部分，你能够独立完成一个具备完整 Props 定义、Events 触发、Slots 扩展能力的组件，并能将其打包发布。资料中的代码示例可以直接配合本地环境进行调试，建议每学完一个属性或功能点，就在自己的项目中复现一遍，重点观察样式变量如何影响最终渲染结果，以及父子组件间的数据流如何传递。不要只停留在看懂视频，动手复现并尝试修改源码，才能真正掌握组件库开发的底层逻辑。

课程目录

第1章 monoreop工作区配置 第01节.mp4
 83.87M 第02节 monorepo 建立工作区.mp4
 97.93M 第03节 构建演示项目.mp4
 21.72M 第04节 构建button组件目.mp4
 82.95M 第05节 全局注册、按需加载.mp4
 96.84M 第2章 sass规范组件库UI样式 第07节 css 组件元素规范.mp4
 37.42M 第08节 css 组件CSS的命名规范.mp4
 46.54M 第09节 css 定义命名空间.mp4
 27.89M 第10节 sass 定义block命间.mp4
 38.72M 第11节 sass 定义子元素element命名.mp4
 35.15M 第12节 sass 定义modifier以及modifierValue的属性.mp4
 55.84M 第13节 sass 定义is方法生成禁用类名.mp4
 47.55M 第14节 css组件为主题包定义.mp4
 27.96M 第3章 button组件基本开发 第15节 button组件基础渲染.mp4
 51.02M 第16节 button组件theme主题渲染.mp4
 63.54M 第17节 button组件round圆角.mp4
 16.52M 第18节 button组件disabled禁用.mp4
 92.81M 第19节 button组件hover属性.mp4
 24.10M 第20节 button组件text属性.mp4
 92.42M 第21节 button组件link链接属性.mp4
 58.03M 第22节 button组件block块级属性.mp4
 20.55M 第23节 button组件border属性.mp4
 40.99M 第24节 button组件size属性.mp4
 39.23M 第25节 button组件circle圆形.mp4
 46.98M 第26节 button组件icon图标.mp4
 63.92M 第27节 button组件loading加载.mp4
 61.53M 第28节 button组件loading业务加载.mp4
 69.45M 第29节 button组件click单击事件.mp4
 23.35M 第30节 button组件slot插槽.mp4
 13.27M 第31节 buttonGroup组件.mp4
 27.46M 第32节 buttonGroup组件样式.mp4
 38.79M 第33节 buttonGroup属性优先级.mp4
 63.25M 第4章 sass定义组件库样式变量 第34节 sass - deepMarge定义主题色.mp4
 61.57M 第35节 sass - 层次色生成原理.mp4
 22.12M 第36节 sass - @each @for @include生成层色.mp4
 74.78M 第37节 sass - 其他属性的定义.mp4
 32.11M 第38节 root - 了解基本用法.mp4
 27.62M 第39节 sass - 定义变量前缀.mp4
 33.30M 第40节 sass - 生成主题色变量属性.mp4
 69.69M 第41节 sass - 生成层次色变量属性.mp4
 43.47M 第42节 sass - 变量名称的使用.mp4
 48.38M 第43节 sass - 生成全局变量属性.mp4
 61.07M 第5章 button组件应用sass变量 第44节 组件可变化的属性.mp4
 27.82M 第45节 定义button组件的私有变量.mp4
 66.32M 第46节 生成button组件的私有变量.mp4
 59.95M 第47节 button组件绑定变量.mp4
 36.54M 第48节 button组件生成主题色变量.mp4
 66.75M 第49节 button组件绑定主题色变量.mp4
 95.55M 第50节 button组件绑定size尺寸变量.mp4
 79.52M 第51节 button组件绑定fontSize文本尺寸变量.mp4
 46.74M 第52节 button组件绑定disabled禁用属性变量.mp4
 60.28M 第53节 button组件绑定link链接按钮变量.mp4
 60.13M 第54节 button组件绑定text文本属性变量.mp4
 117.63M 第6章 bem规则生成类名 第55节 bem规则生成类名的概念.mp4
 33.51M 第56节 bem规则生成块元素类名.mp4
 60.77M 第57节 bem规则生成element子块元素类名.mp4
 31.45M 第58节 bem规则生成modifier修改属性类名.mp4
 38.41M 第59节 bem规则生成state状态类名.mp4
 66.85M 【免费课程+ www. 】源码+++课件.zip
 1.77M Vue.js 3高级编程：UI组件库开发/