资源介绍：

高难度+最新技术栈，Vite + Vue3.3 + Vitest + Vitepress 打造大厂敲门砖项目

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

课程目录

• 1-课程介绍
• 1-1 课程导学
• 1-2 代码库使用注意事项
• 2-Typescript 基础知识
• 2-1 什么是 Typescript 为什么要学习它
• 2-10 泛型（Generics） 第二部分 – 约束泛型
• 2-11 泛型第三部分 – 泛型在类和接口中的使用
• 2-12 类型别名，字面量 和 交叉类型
• 2-13 声明文件 第一部分
• 2-14 声明文件 第二部分
• 2-15 内置类型
• 2-16 配置文件
• 2-2 安装 Typescript
• 2-3 原始数据类型和 Any 类型
• 2-4 数组和元组
• 2-5 Interface- 接口 初探
• 2-6 函数
• 2-7 类型推论 联合类型和 类型断言
• 2-8 枚举（Enum）
• 2-9 泛型（Generics） 第一部分
• 3- Vue3.0 结合 Typescript 基础知识全面补强
• 3-1 Vue3 学习导学
• 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更新简介
• 3-2 使用 vite 创建项目
• 3-3 文件结构以及推荐插件
• 3-4 ESLint 简介和初步使用
• 3-5 ESLint 配合 Vite 设置更多规则
• 3-6 响应式基础 – Ref 和 Reactive
• 3-7 computed 计算属性
• 3-8 watch 监听器
• 3-9 生命周期和模版引用
• 4-万事开头难 – Button 组件
• 4-1 Button 组件架构设计以及需求分析
• 4-10 为 Button 添加样式
• 4-11 使用 PostCSS 生成对应的CSS 颜色变量
• 4-12 Button 章节总结
• 4-2 初始化项目以及项目文件结构
• 4-3 Button 组件编码第一部分
• 4-4 安装使用 Vue Macros
• 4-5 Button编码第二部分
• 4-6 选取 CSS 解决方案，现代样式解决方案一览
• 4-7 色彩系统：当一次设计师
• 4-8 添加色彩变量
• 4-9 添加CSS Reset
• 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-10 测试Collapse 事件的第一种方式
• 7-11 添加 Collapse 组件的事件测试 第二部分
• 7-12 整理测试用例
• 7-13 测试总结
• 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 添加测试用例
• 8-通用组件 -Tooltip 组件
• 8-1 Tooltip 组件需求分析
• 8-10 给 Tooltip 组件添加测试
• 8-11 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 组件添加样式
• 资料代码
• typescript-basic-master.exe
• v-element-master.exe
• vue3-basic-master.exe