进阶必学，2023最新，打造媲美ElementPlus的组件库

简介

课程简介

Vue3.3 + TS4 ，自主打造媲美 ElementPlus视频课程，由办公模板库编程网lexuecode.com整理分享。本课程带你使用最新技术栈Vue3.3 + TS4 以及周边最新技术，从0到1完成10+经典组件的设计与开发，1:1 全体系复刻大厂组件库开发全流程，让你掌握10+典型组件开发方法，提升高难度组件设计思想与大型项目架构思维，进阶成为前端开发高手。

课程目录

├── 1-课程介绍/
│   ├── [ 14M] 1-1 课程导学
│   └── [ 20M] 1-2 代码库使用注意事项
├── 2-Typescript 基础知识/
│   ├── [ 24M] 2-1 什么是 Typescript 为什么要学习它
│   ├── [ 13M] 2-2 安装 Typescript
│   ├── [ 13M] 2-3 原始数据类型和 Any 类型
│   ├── [ 15M] 2-4 数组和元组
│   ├── [8.8M] 2-5 Interface- 接口初探
│   ├── [ 17M] 2-6 函数
│   ├── [ 18M] 2-7 类型推论联合类型和类型断言
│   ├── [ 18M] 2-8 枚举（Enum）
│   ├── [ 18M] 2-9 泛型（Generics）第一部分
│   ├── [ 17M] 2-10 泛型（Generics）第二部分 – 约束泛型
│   ├── [ 26M] 2-11 泛型第三部分 – 泛型在类和接口中的使用
│   ├── [ 17M] 2-12 类型别名，字面量和交叉类型
│   ├── [ 40M] 2-13 声明文件第一部分
│   ├── [ 27M] 2-14 声明文件第二部分
│   ├── [ 25M] 2-15 内置类型
│   └── [ 27M] 2-16 配置文件
├── 3- Vue3.0 结合 Typescript 基础知识全面补强/
│   ├── [5.3M] 3-1 Vue3 学习导学
│   ├── [ 29M] 3-2 使用 vite 创建项目
│   ├── [ 46M] 3-3 文件结构以及推荐插件
│   ├── [ 40M] 3-4 ESLint 简介和初步使用
│   ├── [ 55M] 3-5 ESLint 配合 Vite 设置更多规则
│   ├── [ 36M] 3-6 响应式基础 – Ref 和 Reactive
│   ├── [ 27M] 3-7 computed 计算属性
│   ├── [ 58M] 3-8 watch 监听器
│   ├── [ 47M] 3-9 生命周期和模版引用
│   ├── [ 48M] 3-10 组件基础-属性
│   ├── [ 27M] 3-11 组件自定义事件
│   ├── [ 40M] 3-12 组合式函数
│   ├── [ 61M] 3-13 创建 useURLLoader
│   ├── [ 30M] 3-14 useURLLoader 第二部分
│   ├── [ 29M] 3-15 setup语法第一部分
│   ├── [ 33M] 3-16 setup 语法第二部分
│   ├── [ 41M] 3-17 依赖注入第一部分
│   ├── [ 28M] 3-18 依赖注入第二部分
│   └── [ 43M] 3-19 Vue3.3更新简介
├── 4-万事开头难 – Button 组件/
│   ├── [ 19M] 4-1 Button 组件架构设计以及需求分析
│   ├── [ 20M] 4-2 初始化项目以及项目文件结构
│   ├── [ 52M] 4-3 Button 组件编码第一部分
│   ├── [ 34M] 4-4 安装使用 Vue Macros
│   ├── [ 51M] 4-5 Button编码第二部分
│   ├── [ 37M] 4-6 选取 CSS 解决方案，现代样式解决方案一览
│   ├── [ 41M] 4-7 色彩系统：当一次设计师
│   ├── [ 44M] 4-8 添加色彩变量
│   ├── [ 34M] 4-9 添加CSS Reset
│   ├── [ 70M] 4-10 为 Button 添加样式
│   ├── [ 76M] 4-11 使用 PostCSS 生成对应的CSS 颜色变量
│   └── [ 21M] 4-12 Button 章节总结
├── 5-更近一步 Collapse 组件/
│   ├── [ 34M] 5-1 Collapse 组件架构设计以及需求分析
│   ├── [ 43M] 5-2 Collapse 编码第一部分基础编码
│   ├── [ 43M] 5-3 Collapse 编码第二部分 – 使用 Context 完成父子属性传递
│   ├── [ 51M] 5-4 Collapse 编码第三部分支持 v-model
│   ├── [ 55M] 5-5 Collapse 添加样式以及原生 Transition 组件
│   ├── [ 31M] 5-6 Collapse 添加下拉动画 – 动态计算高度（难点）
│   ├── [ 23M] 5-7 Collapse 添加动画第二部分 – 尽善尽美
│   └── [ 13M] 5-8 Collapse 组件总结
├── 6-它山之石 – Icon 组件/
├── @办公模板库编程网lexuecode.com
│   ├── [ 39M] 6-1 图标库发展历程简介以及 Fontawesome 的安装使用
│   ├── [ 45M] 6-2 Icon 组件编码第一部分 – 基本实现
│   ├── [ 38M] 6-3 Icon 组件编码第一部分 – 完善功能以及样式添加
│   ├── [ 51M] 6-4 看看怎么样 – 为 Button 以及 Collapse 添加图标
│   └── [ 26M] 6-5 Icon组件总结
├── 7-组件测试/
│   ├── [ 19M] 7-1 为什么要有测试
│   ├── [ 31M] 7-2 简介 Vitest 以及使用
│   ├── [ 63M] 7-3 学习回调测试以及模拟第三方库实现
│   ├── [ 24M] 7-4 安装 vue-test-utils 并且使用
│   ├── [ 33M] 7-5 Button 测试用例第二部分
│   ├── [ 38M] 7-6 Button 测试第三部分：学习使用 stub
│   ├── [ 31M] 7-7 学习 VNode 定义以及 Render Function
│   ├── [ 31M] 7-8 使用 Render Function 写组件以及了解JSX
│   ├── [ 60M] 7-9 为 Collapse 添加测试用例
│   ├── [ 26M] 7-10 测试Collapse 事件的第一种方式
│   ├── [ 45M] 7-11 添加 Collapse 组件的事件测试第二部分
│   ├── [ 52M] 7-12 整理测试用例
│   └── [ 19M] 7-13 测试总结
├── 8-通用组件 -Tooltip 组件/
│   ├── [ 16M] 8-1 Tooltip 组件需求分析
│   ├── [ 47M] 8-2 安装并试用 Popper.js
│   ├── [ 51M] 8-3 Tooltip 编码第一部分 – 实现基本功能
│   ├── [ 55M] 8-4 Tooltip 编码第二部分 – 支持动态事件
│   ├── [ 30M] 8-5 Tooltip编码第三部分 – 实现外侧点击关闭
│   ├── [ 41M] 8-6 Tooltip 编码第四部分 – 实现手动打开关闭
│   ├── [ 42M] 8-7 Tooltip 编码第五部分 – 添加 popper 参数以及动画效果
│   ├── [ 44M] 8-8 Tooltip 编码第六部分 – 实现延时显示隐藏功能
│   ├── [ 45M] 8-9 给 Tooltip 组件添加样式
│   ├── [ 61M] 8-10 给 Tooltip 组件添加测试
│   └── [ 19M] 8-11 Tooltip 组件总结