第1章 课程介绍
视频：
1-1 课程导学(06:26)
视频：
1-2 代码库使用注意事项(04:24)
图文：
第2章 Typescript 基础知识
视频：
2-1 什么是 Typescript 为什么要学习它(09:52)
视频：
2-2 安装 Typescript(06:06)
视频：
2-3 原始数据类型和 Any 类型(06:07)
视频：
2-4 数组和元组(06:55)
视频：
2-5 Interface- 接口 初探(05:40)
视频：
2-6 函数(07:37)
视频：
2-7 类型推论 联合类型和 类型断言(07:48)
视频：
2-8 枚举（Enum）(07:41)
视频：
2-9 泛型（Generics） 第一部分(07:46)
视频：
2-10 泛型（Generics） 第二部分 - 约束泛型(07:06)
视频：
2-11 泛型第三部分 - 泛型在类和接口中的使用(11:16)
视频：
2-12 类型别名，字面量 和 交叉类型(07:11)
视频：
2-13 声明文件 第一部分(13:34)
视频：
2-14 声明文件 第二部分(10:43)
视频：
2-15 内置类型(08:36)
视频：
2-16 配置文件(10:43)
第3章 Vue3.0 结合 Typescript 基础知识全面补强
视频：
3-1 Vue3 学习导学(02:48)
视频：
3-2 使用 vite 创建项目(07:43)
视频：
3-3 文件结构以及推荐插件(13:04)
视频：
3-4 ESLint 简介和初步使用(11:12)
视频：
3-5 ESLint 配合 Vite 设置更多规则(12:45)
视频：
3-6 响应式基础 - Ref 和 Reactive(13:08)
视频：
3-7 computed 计算属性(08:30)
视频：
3-8 watch 监听器(13:41)
视频：
3-9 生命周期和模版引用(11:40)
视频：
3-10 组件基础-属性(15:02)
视频：
3-11 组件自定义事件(08:57)
视频：
3-12 组合式函数(10:52)
视频：
3-13 创建 useURLLoader(14:41)
视频：
3-14 useURLLoader 第二部分(08:52)
视频：
3-15 setup语法第一部分(05:40)
视频：
3-16 setup 语法第二部分(10:15)
视频：
3-17 依赖注入第一部分(11:17)
视频：
3-18 依赖注入第二部分(11:18)
视频：
3-19 Vue3.3更新简介(11:38)
第4章 万事开头难 - Button 组件
视频：
4-1 Button 组件架构设计以及需求分析(07:24)
视频：
4-2 初始化项目以及项目文件结构(08:07)
视频：
4-3 Button 组件编码第一部分(16:07)
视频：
4-4 安装使用 Vue Macros(08:46)
视频：
4-5 Button编码第二部分(12:18)
视频：
4-6 选取 CSS 解决方案，现代样式解决方案一览(08:49)
视频：
4-7 色彩系统：当一次设计师(09:27)
视频：
4-8 添加色彩变量(08:48)
视频：
4-9 添加CSS Reset(09:42)
视频：
4-10 为 Button 添加样式(13:39)
视频：
4-11 使用 PostCSS 生成对应的CSS 颜色变量(16:03)
视频：
4-12 Button 章节总结(06:11)
第5章 更近一步 Collapse 组件
视频：
5-1 Collapse 组件架构设计以及需求分析(09:00)
视频：
5-2 Collapse 编码第一部分 基础编码(11:55)
视频：
5-3 Collapse 编码第二部分 - 使用 Context 完成父子属性传递(13:13)
视频：
5-4 Collapse 编码第三部分支持 v-model(12:07)
视频：
5-5 Collapse 添加样式以及原生 Transition 组件(11:42)
视频：
5-6 Collapse 添加下拉动画 - 动态计算高度（难点）(07:52)
视频：
5-7 Collapse 添加动画第二部分 - 尽善尽美(06:15)
视频：
5-8 Collapse 组件总结(05:01)
第6章 它山之石 - Icon 组件
视频：
6-1 图标库发展历程简介以及 Fontawesome 的安装使用(11:35)
视频：
6-2 Icon 组件编码第一部分 - 基本实现(10:02)
视频：
6-3 Icon 组件编码第一部分 - 完善功能以及样式添加(12:07)
视频：
6-4 看看怎么样 - 为 Button 以及 Collapse 添加图标(11:31)
视频：
6-5 Icon组件总结(07:19)
第7章 组件测试
视频：
7-1 为什么要有测试(08:07)
视频：
7-2 简介 Vitest 以及使用(13:14)
视频：
7-3 学习回调测试以及模拟第三方库实现(14:36)
视频：
7-4 安装 vue-test-utils 并且使用(08:50)
视频：
7-5 Button 测试用例第二部分(09:54)
视频：
7-6 Button 测试第三部分：学习使用 stub(10:33)
视频：
7-7 学习 VNode 定义以及 Render Function(09:59)
视频：
7-8 使用 Render Function 写组件以及了解JSX(12:02)
视频：
7-9 为 Collapse 添加测试用例(12:48)
视频：
7-10 测试Collapse 事件的第一种方式(05:32)
视频：
7-11 添加 Collapse 组件的事件测试 第二部分(09:39)
视频：
7-12 整理测试用例(10:17)
视频：
7-13 测试总结(07:09)
第8章 通用组件 -Tooltip 组件
视频：
8-1 Tooltip 组件需求分析(05:49)
视频：
8-2 安装并试用 Popper.js(10:48)
视频：
8-3 Tooltip 编码第一部分 - 实现基本功能(14:34)
视频：
8-4 Tooltip 编码第二部分 - 支持动态事件(12:23)
视频：
8-5 Tooltip编码第三部分 - 实现外侧点击关闭(10:41)
视频：
8-6 Tooltip 编码第四部分 - 实现手动打开关闭(09:25)
视频：
8-7 Tooltip 编码第五部分 - 添加 popper 参数以及动画效果(09:10)
视频：
8-8 Tooltip 编码第六部分 - 实现延时显示隐藏功能(11:02)
视频：
8-9 给 Tooltip 组件添加样式(10:16)
视频：
8-10 给 Tooltip 组件添加测试(12:31)
视频：
8-11 Tooltip 组件总结(06:13)
第9章 现学现卖 - Dropdown 组件
视频：
9-1 Dropdown 需求分析(05:16)
视频：
9-2 Dropdown 编码第一部分(15:17)
视频：
9-3 Dropdown 编码第二部分(07:26)
视频：
9-4 Dropdown 编码第三部分(14:39)
视频：
9-5 Dropdown编码第四部分(14:59)
视频：
9-6 Dropdown 总结(07:40)
第10章 高难度 - Message 组件（有难度）
视频：
10-1 Message 组件需求分析(06:31)
视频：
10-2 Message 组件编码第一部分(11:45)
视频：
10-3 createMessage 第一部分编码(10:31)
视频：
10-4 createMessage 编码第二部分(07:19)
视频：
10-5 createMessage 编码第三部分(08:14)
视频：
10-6 createMessage 编码第四部分(12:49)
视频：
10-7 createMessage 编码第五部分(10:18)
视频：
10-8 createMessage 编码第六部分(10:22)
视频：
10-9 createMessage 编码第七部分(13:56)
视频：
10-10 createMessage 编码第八部分(13:32)
视频：
10-11 createMessage 编码第九部分 添加样式以及动画(12:11)
视频：
10-12 createMessage 编码第十部分(14:36)
视频：
10-13 Message 组件总结(08:10)
第11章 更好的展示方式 - 使用工具生成文档
视频：
11-1 Vitepress 简介(05:15)
视频：
11-2 VitePress 安装和初步使用(11:19)
视频：
11-3 Vitepress 路由系统(10:11)
视频：
11-4 Vitepress 支持组件写法(07:17)
视频：
11-5 Vitepress 添加自定义样式(08:45)
视频：
11-6 添加 demo-preview 插件(13:21)
视频：
11-7 Vitepress 自定义主题颜色(09:09)
视频：
11-8 Vitepress 为生产环境打包(05:59)
视频：
11-9 Vitepress 总结(06:18)
第12章 进入表单的世界 - Input 组件
视频：
12-1 Input 需求分析(09:49)
视频：
12-2 Input 编码第一部分搭建框架(10:55)
视频：
12-3 Input 测试用例编写以及引出 TDD 的开发方式(10:35)
视频：
12-4 Input 编码第二部分支持 v-model(13:30)
视频：
12-5 Input 编码第三部分 支持按钮清空当前文本(12:25)
视频：
12-6 Input编码第四部分 支持密码切换(13:21)
视频：
12-7 Input 编码第五部分 支持事件(12:06)
视频：
12-8 Input 编码第六部分：组件添加原生属性(09:12)
视频：
12-9 Input 组件界面测试以及改进(11:31)
视频：
12-10 Input开发总结(03:50)
第13章 狸猫换太子 - Switch 组件
视频：
13-1 Switch组件需求分析(05:10)
视频：
13-2 Switch 编码第一部分(08:14)
视频：
13-3 Switch 编码第二部分 样式游戏(12:30)
视频：
13-4 Switch 编码第三部分(11:02)
视频：
13-5 Switch组件编码第四部分(11:05)
视频：
13-6 Switch 开发总结(04:16)
第14章 魔高一丈- Select 组件（有难度）
视频：
14-1 1 Select 需求分析(08:05)
视频：
14-2 2 Select 编码第一部分 基本结构(12:17)
视频：
14-3 3 Select 编码第二部分 选中选项功能(11:24)
视频：
14-4 4 Select 编码第三部分 初步添加样式(11:22)
视频：
14-5 5 Select 编码第四部分 添加箭头图标 添加外侧点击关闭(12:33)
视频：
14-6 6 Select编码第五部分 支持清空(10:41)
视频：
14-7 7 Select编码第六部分 支持自定义模版(08:37)
视频：
14-8 8 Select 编码第七部分 支持筛选(11:39)
视频：
14-9 9 Select 编码第八部分 完善筛选功能(10:13)
视频：
14-10 Select编码第九部分 支持远程搜索(13:07)
视频：
14-11 11 Select 编码第十部分 远程请求添加防抖(09:00)
视频：
14-12 12 Select 编码第十一部分 支持键盘操作(09:17)
视频：
14-13 13 Select 编码第十二部分 完善键盘操作功能(13:09)
视频：
14-14 14 Select 总结(08:47)
第15章 大一统- Form 组件（有难度）
视频：
15-1 Form 需求分析(10:32)
视频：
15-2 Form 编码第一部分 - 基础结构(08:17)
视频：
15-3 Form 编码第二部分 - 添加数据和规则(12:01)
视频：
15-4 Form 组件第三部分 - 获取数据和规则(11:47)
视频：
15-5 Form编码第四部分 - 学习使用 async-validator(11:34)
视频：
15-6 Form 编码第五部分 - FormItem 完成验证(12:12)
视频：
15-7 Form编码第六部分 - 自动触发验证(10:25)
视频：
15-8 Form 编码第七部分 - 添加 trigger 条件(08:09)
视频：
15-9 Form 组件第八部分 - 父子组件通信(10:12)
视频：
15-10 Form 编码第九部分 - 完成表单整个验证功能(14:51)
视频：
15-11 Form编码第十部分 - 添加重置状态功能(12:37)
视频：
15-12 Form编码第十一部分 - 添加样式(12:05)
视频：
15-13 Form 编码第十二部分 - 最终整合(10:33)
视频：
15-14 Form 总结最近学习
第16章 组件库打包以及发布内容更新中
|
猿人部落
( A20190523-0239 )
