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章 组件库打包以及发布

内容更新中