Vue3.3 + TS4 自主打造媲美 ElementPlus 的组件库
昨天区块链
课程简介：
Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库
高难度+最新技术栈，Vite + Vue3.3 + Vitest + Vitepress 打造大厂敲门砖项目
你将学到：
1. 最新：最新Vue3.3及相关技术
4. 规范：大厂开发模式/代码规范
2. 最全：10+典型组件开发方法
5. 思维：提升大型项目架构思维
3. 深度：高难度组件设计思想
6. 全流程：测试，文档生产，打包
简介：
在互联网就业形式越来越严峻的今天，掌握一项具有强竞争力的技能尤其重要。复杂组件库研发因其涉及的技术难度和广度无疑成为最好的选择。本课程带你使用最新技术栈Vue3.3 + TS4 以及周边最新技术，从0到1完成10+经典组件的设计与开发，1:1 全体系复刻大厂组件库开发全流程，提升架构思维和代码设计能力，进阶成为前端开发高手。
章节目录：
第1章 课程介绍
3 节｜11分钟
收起
视频：
1-1 课程导学
试看
06:26
视频：
1-2 代码库使用注意事项
试看
04:24
图文：
1-3 项目演示地址：http://element.vikingship.xyz/
第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章 组件测试
内容更新中
第8章 通用组件 -Tooltip 组件
内容更新中
第9章 现学现卖 – Dropdown 组件
内容更新中
第10章 高难度 – Message 组件（有难度）
内容更新中
第11章 更好的展示方式 – 使用工具生成文档
内容更新中
第12章 进入表单的世界 – Input 组件
内容更新中
第13章 狸猫换太子 – Switch 组件
内容更新中
第14章 魔高一丈- Select 组件（有难度）
内容更新中
第15章 大一统- Form 组件（有难度）
内容更新中
第16章 组件库打包以及发布
内容更新中
3 节｜11分钟
收起
视频：
1-1 课程导学
试看
06:26
视频：
1-2 代码库使用注意事项
试看
04:24
图文：
1-3 项目演示地址：http://element.vikingship.xyz/
第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章 组件测试
内容更新中
第8章 通用组件 -Tooltip 组件
内容更新中
第9章 现学现卖 – Dropdown 组件
内容更新中
第10章 高难度 – Message 组件（有难度）
内容更新中
第11章 更好的展示方式 – 使用工具生成文档
内容更新中
第12章 进入表单的世界 – Input 组件
内容更新中
第13章 狸猫换太子 – Switch 组件
内容更新中
第14章 魔高一丈- Select 组件（有难度）
内容更新中
第15章 大一统- Form 组件（有难度）
内容更新中
第16章 组件库打包以及发布
内容更新中
