Vue3.3 + TypeScript ，自主打造媲美 ElementPlus 的组件库之学习笔记

Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库

第1章 课程介绍
1-1 课程导学
1-2 代码库使用注意事项
1-3 项目演示地址：http://element.vikingship.xyz/

第2章 Typescript 基础知识
2-1 什么是 Typescript 为什么要学习它
2-2 安装 Typescript
2-3 原始数据类型和 Any 类型
2-4 数组和元组
2-5 Interface- 接口 初探
2-6 函数
2-7 类型推论 联合类型和 类型断言
2-8 枚举（Enum）
2-9 泛型（Generics） 第一部分
2-10 泛型（Generics） 第二部分 - 约束泛型
2-11 泛型第三部分 - 泛型在类和接口中的使用
2-12 类型别名，字面量 和 交叉类型
2-13 声明文件 第一部分
2-14 声明文件 第二部分
2-15 内置类型
2-16 配置文件

第3章  Vue3.0 结合 Typescript 基础知识全面补强
3-1 Vue3 学习导学
3-2 使用 vite 创建项目
3-3 文件结构以及推荐插件
3-4 ESLint 简介和初步使用
3-5 ESLint 配合 Vite 设置更多规则
3-6 响应式基础 - Ref 和 Reactive
3-7 computed 计算属性
3-8 watch 监听器
3-9 生命周期和模版引用
3-10 组件基础-属性
3-11 组件自定义事件
3-12 组合式函数
3-13 创建 useURLLoader
3-14 useURLLoader 第二部分
3-15 setup语法第一部分
3-16 setup 语法第二部分
3-17 依赖注入第一部分
3-18 依赖注入第二部分
3-19 Vue3.3更新简介

第4章 万事开头难 - Button 组件
4-1 Button 组件架构设计以及需求分析
4-2 初始化项目以及项目文件结构
4-3 Button 组件编码第一部分
4-4 安装使用 Vue Macros
4-5 Button编码第二部分
4-6 选取 CSS 解决方案，现代样式解决方案一览
4-7 色彩系统：当一次设计师
4-8 添加色彩变量
4-9 添加CSS Reset
4-10 为 Button 添加样式
4-11 使用 PostCSS 生成对应的CSS 颜色变量
4-12 Button 章节总结

第5章 更近一步 Collapse 组件
5-1 Collapse 组件架构设计以及需求分析
5-2 Collapse 编码第一部分 基础编码
5-3 Collapse 编码第二部分 - 使用 Context 完成父子属性传递
5-4 Collapse 编码第三部分支持 v-model
5-5 Collapse 添加样式以及原生 Transition 组件
5-6 Collapse 添加下拉动画 - 动态计算高度（难点）
5-7 Collapse 添加动画第二部分 - 尽善尽美
5-8 Collapse 组件总结

第6章 它山之石 - Icon 组件
6-1 图标库发展历程简介以及 Fontawesome 的安装使用
6-2 Icon 组件编码第一部分 - 基本实现
6-3 Icon 组件编码第一部分 - 完善功能以及样式添加
6-4 看看怎么样 - 为 Button 以及 Collapse 添加图标
6-5 Icon组件总结

第7章 组件测试
7-1 为什么要有测试
7-2 简介 Vitest 以及使用
7-3 学习回调测试以及模拟第三方库实现
7-4 安装 vue-test-utils 并且使用
7-5 Button 测试用例第二部分
7-6 Button 测试第三部分：学习使用 stub
7-7 学习 VNode 定义以及 Render Function
7-8 使用 Render Function 写组件以及了解JSX
7-9 为 Collapse 添加测试用例
7-10 测试Collapse 事件的第一种方式
7-11 添加 Collapse 组件的事件测试 第二部分
7-12 整理测试用例
7-13 测试总结

第8章 通用组件 -Tooltip 组件
8-1 Tooltip 组件需求分析
8-2 安装并试用 Popper.js
8-3 Tooltip 编码第一部分 - 实现基本功能
8-4 Tooltip 编码第二部分 - 支持动态事件
8-5 Tooltip编码第三部分 - 实现外侧点击关闭
8-6 Tooltip 编码第四部分 - 实现手动打开关闭
8-7 Tooltip 编码第五部分 - 添加 popper 参数以及动画效果
8-8 Tooltip 编码第六部分 - 实现延时显示隐藏功能
8-9 给 Tooltip 组件添加样式
8-10 给 Tooltip 组件添加测试
8-11 Tooltip 组件总结

第9章 现学现卖 - Dropdown 组件
9-1 Dropdown 需求分析
9-2 Dropdown 编码第一部分
9-3 Dropdown 编码第二部分
9-4 Dropdown 编码第三部分
9-5 Dropdown编码第四部分
9-6 Dropdown 总结

第10章 高难度 - Message 组件（有难度）
10-1 Message 组件需求分析
10-2 Message 组件编码第一部分
10-3 createMessage 第一部分编码
10-4 createMessage 编码第二部分
10-5 createMessage 编码第三部分
10-6 createMessage 编码第四部分
10-7 createMessage 编码第五部分
10-8 createMessage 编码第六部分
10-9 createMessage 编码第七部分
10-10 createMessage 编码第八部分
10-11 createMessage 编码第九部分 添加样式以及动画
10-12 createMessage 编码第十部分
10-13 Message 组件总结

第11章 更好的展示方式 - 使用工具生成文档
11-1 Vitepress 简介
11-2 VitePress 安装和初步使用
11-3 Vitepress 路由系统
11-4 Vitepress 支持组件写法
11-5 Vitepress 添加自定义样式
11-6 添加 demo-preview 插件
11-7 Vitepress 自定义主题颜色
11-8 Vitepress 为生产环境打包
11-9 Vitepress 总结

第12章 进入表单的世界 - Input 组件
12-1 Input 需求分析
12-2 Input 编码第一部分搭建框架
12-3 Input 测试用例编写以及引出 TDD 的开发方式
12-4 Input 编码第二部分支持 v-model
12-5 Input 编码第三部分 支持按钮清空当前文本
12-6 Input编码第四部分 支持密码切换
12-7 Input 编码第五部分 支持事件
12-8 Input 编码第六部分：组件添加原生属性
12-9 Input 组件界面测试以及改进
12-10 Input开发总结

第13章 狸猫换太子 - Switch 组件
13-1 Switch组件需求分析
13-2 Switch 编码第一部分
13-3 Switch 编码第二部分 样式游戏
13-4 Switch 编码第三部分
13-5 Switch组件编码第四部分
13-6 Switch 开发总结

第14章 魔高一丈- Select 组件（有难度）
14-1 1 Select 需求分析
14-2 2 Select 编码第一部分 基本结构
14-3 3 Select 编码第二部分 选中选项功能
14-4 4 Select 编码第三部分 初步添加样式
14-5 5 Select 编码第四部分 添加箭头图标 添加外侧点击关闭
14-6 6 Select编码第五部分 支持清空
14-7 7 Select编码第六部分 支持自定义模版
14-8 8 Select 编码第七部分 支持筛选
14-9 9 Select 编码第八部分 完善筛选功能
14-10 Select编码第九部分 支持远程搜索
14-11 11 Select 编码第十部分 远程请求添加防抖
14-12 12 Select 编码第十一部分 支持键盘操作
14-13 13 Select 编码第十二部分 完善键盘操作功能
14-14 14 Select 总结

第15章 大一统- Form 组件（有难度）
15-1 Form 需求分析
15-2 Form 编码第一部分 - 基础结构
15-3 Form 编码第二部分 - 添加数据和规则
15-4 Form 组件第三部分 - 获取数据和规则
15-5 Form编码第四部分 - 学习使用 async-validator
15-6 Form 编码第五部分 - FormItem 完成验证
15-7 Form编码第六部分 - 自动触发验证
15-8 Form 编码第七部分 - 添加 trigger 条件
15-9 Form 组件第八部分 - 父子组件通信
15-10 Form 编码第九部分 - 完成表单整个验证功能
15-11 Form编码第十部分 - 添加重置状态功能
15-12 Form编码第十一部分 - 添加样式
15-13 Form 编码第十二部分 - 最终整合
15-14 Form 总结

第16章 组件库打包以及发布
16-1 导学
16-2 Javascript 模块化历史
16-3 Bundler打包工具 简介
16-4 Vite 的工作原理
16-5 明确打包什么类型的模块
16-6 了解 Vue3 的插件系统
16-7 创建组件的入口文件
16-8 简介 Rollup 的配置文件以及插件系统
16-9 打包组件库第一部分 - 小试牛刀
16-10 打包组件库第二部分 - 配置 rollup
16-11 组件库打包第三部分 - 生成类型定义文件
16-12 组件库打包第四部分- 生成样式文件
16-13 组件库打包第五部分 - 拆分构建脚本
16-14 npm link 测试打包内容
16-15 最终修正打包信息
16-16 npm简介
16-17 发布到 npm
16-18 打包发布总结