课程介绍：在互联网就业形式越来越严峻的今天，掌握一项具有强竞争力的技能尤其重要。复杂组件库研发因其涉及的技术难度和广度无疑成为最好的选择。本课程带你使用最新技术栈Vue3.3 + TS4 以及周边最新技术，从0到1完成10+经典组件的设计与开发，1:1 全体系复刻大厂组件库开发全流程，提升架构思维和代码设计能力，进阶成为前端开发高手。

第1章 课程介绍
3 节｜11分钟

展开 

第2章 Typescript 基础知识
16 节｜135分钟

收起 

  • 视频：
    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 基础知识全面补强
19 节｜204分钟

收起 

  • 视频：
    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 组件
12 节｜126分钟

收起 

  • 视频：
    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 组件
8 节｜78分钟

收起 

  • 视频：
    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 组件
5 节｜53分钟

收起 

  • 视频：
    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章 组件测试
13 节｜133分钟

收起 

  • 视频：
    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 组件
11 节｜113分钟

收起 

  • 视频：
    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 组件
6 节｜66分钟

收起 

  • 视频：
    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 组件（有难度）
13 节｜141分钟

收起 

  • 视频：
    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章 更好的展示方式 – 使用工具生成文档
9 节｜78分钟

收起 

  • 视频：
    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 组件
10 节｜108分钟

收起 

  • 视频：
    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 组件
6 节｜53分钟

收起 

  • 视频：
    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 节｜151分钟

收起 

  • 视频：
    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 组件（有难度）
14 节｜156分钟

收起 

  • 视频：
    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 总结
    10:30
第16章 组件库打包以及发布
18 节｜154分钟

收起 

  • 视频：
    16-1 导学
    05:20

  • 视频：
    16-2 Javascript 模块化历史
    09:37

  • 视频：
    16-3 Bundler打包工具 简介
    08:28

  • 视频：
    16-4 Vite 的工作原理
    11:11

  • 视频：
    16-5 明确打包什么类型的模块
    07:59

  • 视频：
    16-6 了解 Vue3 的插件系统
    10:08

  • 视频：
    16-7 创建组件的入口文件
    08:32

  • 视频：
    16-8 简介 Rollup 的配置文件以及插件系统
    08:29

  • 视频：
    16-9 打包组件库第一部分 – 小试牛刀
    07:28

  • 视频：
    16-10 打包组件库第二部分 – 配置 rollup
    08:05

  • 视频：
    16-11 组件库打包第三部分 – 生成类型定义文件
    08:39

  • 视频：
    16-12 组件库打包第四部分- 生成样式文件
    07:18

  • 视频：
    16-13 组件库打包第五部分 – 拆分构建脚本
    09:16

  • 视频：
    16-14 npm link 测试打包内容
    09:10

  • 视频：
    16-15 最终修正打包信息
    09:20

  • 视频：
    16-16 npm简介
    09:37

  • 视频：
    16-17 发布到 npm
    08:11

  • 视频：
    16-18 打包发布总结
    06:33
    隐藏内容
    本内容需权限查看
    • 普通用户: 1金币
    • VIP会员: 免费
    • 永久会员: 免费
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。