获取资料

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

课程介绍

进阶必学,2023最新 ,打造媲美ElementPlus的组件库视频教程,由整理发布高清完结版。本课程带你使用最新技术栈Vue3.3 + TS4 以及周边最新技术,从0到1完成10+经典组件的设计与开发,1:1 全体系复刻大厂组件库开发全流程,提升架构思维和代码设计能力,进阶成为前端开发高手。

资源目录

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 组件/

[ 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 组件/

[认准一手完整 www.ukoou.com]Vue3.3 + TS4

[ 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 组件总结

评论0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址