告别重复造轮子，掌握业务组件封装核心

很多前端开发者在从“写页面”向“工程化架构”转型时，往往卡在一个瓶颈上：知道要使用 Element Plus 等 UI 库，但一旦涉及复杂业务逻辑，比如带有特定校验规则的表单、需要处理异步加载状态的表格、或者需要跨文件共享状态的业务卡片，常常陷入“复制粘贴再魔改”的低效循环。这门课直指这一痛点，它不教你如何通过 API 快速搭建一个简单页面，而是深入探讨如何基于 Vue 3、Vite 和 TypeScript 技术栈，将通用的业务逻辑剥离出来，封装成高内聚、低耦合的“二次组件”。对于有基础但缺乏架构思维、或者在项目中经常面对组件复用率低、代码冗余严重的学习者来说，这是一门能显著提升代码质量和维护效率的实战课程。它特别适合那些已经熟悉 Vue 基础语法，但在组件设计模式、类型推导以及组合式 API 深度应用上感到困惑的开发者。通过这门课，你将学会如何设计一个既灵活又易用的业务组件，而不仅仅是调用现成的 UI 原子组件。

聚焦设计思路与类型安全，构建可维护的业务组件

课程的核心价值在于“设计”与“类型”的结合。在封装业务组件时，最大的难点往往不是功能实现，而是如何设计合理的 Props 接口和插槽策略，以及如何利用 TypeScript 确保组件在使用时的类型安全。内容会循序渐进地拆解封装思想，重点讲解如何权衡“灵活性”与“易用性”之间的界限。建议重点观看关于组件 API 设计原则、复杂状态管理在组件内的封装技巧，以及 TypeScript 类型推导在组件属性、事件和方法中的应用部分。这几个板块是决定封装质量的关键。学完这部分，你应当能够独立回答以下问题：如何为一个带有复杂交互的表格组件设计通用的分页和搜索逻辑？当子组件需要触发父组件行为时，如何保证事件参数类型的准确传递？如何在组合式 API 中提取可复用的业务逻辑，并解决其依赖注入问题？通过掌握这些技巧，你将具备独立设计企业级业务组件的能力，能够从容应对项目中定制化的 UI 需求，不再受限于基础 UI 库的默认配置。

配合源码练习，从模仿到创新的实战路径

学习组件封装，光看视频不够，必须动手改代码。建议在学习过程中，不要只是被动观看，而是打开资料包中的示例工程，尝试对现有的封装组件进行“破坏性”修改。例如，尝试为封装好的文件上传组件增加“预览”功能，或者为封装的富文本编辑器增加“字数统计”属性。观察代码结构的响应，思考这种扩展是否破坏了原有的封装逻辑，是否需要重构 Props 定义。这种逆向工程式的练习，能极大加深你对组件边界设计的理解。同时，结合 Vite 的开发体验，快速验证你的封装在大型项目中的表现。最终的目标是，你能独立从 0 到 1 封装出一个符合团队规范的、带有完整类型定义和文档注释的业务组件库，并能让其他同事在不需要阅读源码的情况下，仅通过类型提示就能正确使用它。这种从“使用者”到“设计者”的转变，是前端进阶路上最关键的一步。

课程介绍

本课程来自某课网，（高清完结版），是一门二次组件封装视频教程。本课程结合前沿技术栈Vue+Vite+TS，全面讲解二次封装的思想、技巧、组件设计等，难度上循序渐进，没有封装经验一样看懂。并且列举大量封装案例，帮大家系统掌握二次组件封装的设计思路和技巧。

课程目录

├── 第1章课程简介
│ ├── 1-1导学.mp4
│ └── 1-2二次封装的意义.mp4
├── 第2章封装组件初级篇（上）
│ ├── 2-10省市区选择组件-利用github获取到省市区数据.mp4
│ ├── 2-11省市区选择组件-巧用watch来达到三级联动效果.mp4
│ ├── 2-12省市区选择组件-完善省市区联动组件并给父组件分发事件.mp4
│ ├── 2-13利用app.use特性全局注册组件.mp4
│ ├── 2-16本章回顾.pdf
│ ├── 2-1本章概述.pdf
│ ├── 2-2搭建vite项目并配置路由和element-plus.mp4
│ ├── 2-3全局注册图标.mp4
│ ├── 2-4伸缩菜单-完成伸缩菜单基本功能.mp4
│ ├── 2-5伸缩菜单-抽离头部和侧边栏组件并完善伸缩菜单.mp4
│ ├── 2-6图标选择器-巧用两次watch控制弹框的显示与隐藏.mp4
│ ├── 2-7图标选择器-巧用component动态组件显示所有的图标.mp4
│ ├── 2-8图标选择器-利用命名空间修改dialog样式.mp4
│ └── 2-9图标选择器-通过自定义hooks函数实现复制功能.mp4
├── 第3章封装组件初级篇（下）
│ ├── 3-10给通知菜单添加禁用状态.pdf
│ ├── 3-11本章回顾.pdf
│ ├── 3-1本章概述.pdf
│ ├── 3-2趋势标记-图标的组合使用实现上升下降趋势.mp4
│ ├── 3-3趋势标记-动态绑定class的妙用实现颜色反转.mp4
│ ├── 3-4趋势标记-计算属性的妙用实现文字颜色.mp4
│ ├── 3-5通知菜单-icon和badge组件的组合使用.mp4
│ ├── 3-6通知菜单-封装一个列表组件(上).mp4
│ ├── 3-7通知菜单-封装一个列表组件(下).mp4
│ ├── 3-8通知菜单-完善list组件并融合进通知菜单.mp4
│ └── 3-9给趋势标记增加自定义文字大小功能.pdf
├── 第4章封装组件中级篇
│ ├── 4-10时间选择组件-修复日期选择组件结束日期未清空问题.mp4
│ ├── 4-11城市选择组件-组合式使用组件完成基本布局.mp4
│ ├── 4-12城市选择组件-获取城市数据并显示所有城市.mp4
│ ├── 4-13城市选择组件-绑定事件并实现点击字母跳转到对应区域.mp4
│ ├── 4-14城市选择组件-完善按省份选择城市.mp4
│ ├── 4-15城市选择组件-使用filter-method实现搜索过滤.mp4
│ ├── 4-16本章回顾.pdf
│ ├── 4-1导航菜单-导航菜单的需求分析和数据设计.mp4
│ ├── 4-2导航菜单-巧用template实现两级结构的菜单.mp4
│ ├── 4-3导航菜单-使用tsx实现无限层级菜单.mp4
│ ├── 4-4导航菜单-利用封装好的导航菜单组件改造项目整体结构.mp4
│ ├── 4-5导航菜单-完善细节并增加自定义键名功能.mp4
│ ├── 4-6进度条-完成进度条动态加载效果.mp4
│ ├── 4-7给进度条组件加上进度完成事件.pdf
│ ├── 4-8时间选择组件-完成时间选择组件的全部功能.mp4
│ └── 4-9时间选择组件-完成日期选择组件所有功能.mp4
├── 第5章封装组件高级篇（上）
│ ├── 5-10表单组件-集成富文本编辑器wangeditor.mp4
│ ├── 5-11表单组件-完善表单重置逻辑.mp4
│ ├── 5-12表单组件-弹出框表单的基本结构.mp4
│ ├── 5-13表单组件-使用defineExpose获取表单实例方法.mp4
│ ├── 5-14表单组件-完善表单逻辑.mp4
│ ├── 5-15表单组件-表单组件总结.mp4
│ ├── 5-16拓展动态添加和删除表单.pdf
│ ├── 5-17为表单增加自定义验证规则.pdf
│ ├── 5-18为表单增加剩余实例方法.pdf
│ ├── 5-19本章回顾.pdf
│ ├── 5-1本章概述.pdf
│ ├── 5-2表单组件-一个强大的表单组件应该具备哪些功能.mp4
│ ├── 5-3表单组件-使用ts定义表单配置项的数据类型.mp4
│ ├── 5-4表单组件-使用配置的数据完成一个基本版表单.mp4
│ ├── 5-5表单组件-巧用component动态组件配置添加子元素组件.mp4
│ ├── 5-6表单组件-单独处理上传组件-1.mp4
│ ├── 5-7表单组件-单独处理上传组件-2.mp4
│ ├── 5-8表单组件-巧用插槽给表单加上操作项.mp4
│ └── 5-9表单组件-完善表单上传逻辑.mp4
├── 第6章封装组件高级篇（下）
│ ├── 6-10表格组件-修复冒泡事件带来的问题.mp4
│ ├── 6-11表格组件-实现表格分页功能.mp4
│ ├── 6-12拓展表格排序功能.pdf
│ ├── 6-13拓展表格单选功能.pdf
│ ├── 6-14拓展表格多选功能.pdf
│ ├── 6-15本章回顾.pdf
│ ├── 6-1本章概述.pdf
│ ├── 6-2表格组件-一个强大的表格应该具备哪些功能.mp4
│ ├── 6-3表格组件-使用ts定义表格组件需要的类型.mp4
│ ├── 6-4表格组件-通过配置的数据完成一个基础版表格.mp4
│ ├── 6-5表格组件-巧用插槽实现操作项和自定义列数据.mp4
│ ├── 6-6表格组件-为表格加上loading效果.mp4
│ ├── 6-7表格组件-实现可编辑单元格功能.mp4
│ ├── 6-8表格组件-实现可编辑行功能-1.mp4
│ └── 6-9表格组件-实现可编辑行功能-2.mp4
├── 第7章封装组件拓展篇
│ ├── 7-1本章概述.pdf
│ ├── 7-2日历组件-element-plus日历组件的不足和为何选择.mp4
│ ├── 7-3日历组件-使用fullcalendar配置生成日历.mp4
│ ├── 7-4日历组件-日历的事件渲染和点击事件处理.mp4
│ ├── 7-5日历组件-自定义渲染日历内容.mp4
│ ├── 7-6修复组件出现的样式问题.mp4
│ ├── 7-7将日历语言改成英文显示.pdf
│ └── 7-8日历自定义渲染内容使开始时间和结束时间字体都变成红色.pdf
└── 第8章使用vuepress编写组件文档
├── 8-10集成组件库并添加显示和交互.mp4
├── 8-11编写组件库文档的快速上手.mp4
├── 8-12完善组件库所有组件说明（1）.mp4
├── 8-13完善组件库所有组件说明（2）.mp4
├── 8-14完善组件库所有组件说明（3）.mp4
├── 8-15完善组件库所有组件说明（4）.mp4
├── 8-16完善组件库所有组件说明（5）.mp4
├── 8-17完善组件库所有组件说明（6）.mp4
├── 8-18完善组件库文档介绍.mp4
├── 8-19给文档增加自己github和码云仓库地址.pdf
├── 8-1本章概述.pdf
├── 8-20给文档增加自定义logo.pdf
├── 8-21本章回顾.pdf
├── 8-22组件库打包问题处理方案.pdf
├── 8-2实现组件的全量打包.mp4
├── 8-3单独打包每个组件实现按需引入.mp4
├── 8-4发布组件库到npm.mp4
├── 8-5如何更新已经发布的组件库版本.mp4
├── 8-6如何在github部署预览项目.mp4
├── 8-7如何在码云部署预览项目.mp4
├── 8-8组件库文档首页编写.mp4
└── 8-9编写文档网站头部导航和侧边导航.mp4
└──资料代码/