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

admin · 发表于 2023-7-26 22:02:52

Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库(同步更新至第10章)
高难度+最新技术栈，Vite + Vue3.3 + Vitest + Vitepress 打造大厂敲门砖项目

你将学到：
1. 最新：最新Vue3.3及相关技术
4. 规范：大厂开发模式/代码规范
2. 最全：10+典型组件开发方法
5. 思维：提升大型项目架构思维
3. 深度：高难度组件设计思想
6. 全流程：测试，文档生产，打包

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

适合人群

软件开发人员

互联网从业者

前端开发工程师

技术储备

熟悉 HTML CSS JS（必须）

了解 Vue3 技术栈（必须）

环境参数

Typescript 4.7

Vite 4.0.0

Vitepress 1.0.0

Vitest 0.29.2

Vue-test-utils 2.3.0

试看链接：https://pan.baidu.com/s/1OedAvDOlx99mI_Hm4VyANg?pwd=heu6

章节目录：

第1章课程介绍

3 节｜11分钟

1-1 课程导学

1-2 代码库使用注意事项

1-3 项目演示地址http://element.vikingship.xyz/

第2章 Typescript 基础知识

16 节｜135分钟

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 基础知识全面补强

19 节｜204分钟

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

12 节｜126分钟

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

8 节｜78分钟

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

5 节｜53分钟

6-1 图标库发展历程简介以及 Fontawesome 的安装使用

6-2 Icon 组件编码第一部分 - 基本实现

6-3 Icon 组件编码第一部分 - 完善功能以及样式添加

6-4 看看怎么样 - 为 Button 以及 Collapse 添加图标

6-5 Icon组件总结

第7章组件测试

13 节｜133分钟

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

11 节｜113分钟

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

6 节｜66分钟

9-1 Dropdown 需求分析

9-2 Dropdown 编码第一部分

9-3 Dropdown 编码第二部分

9-4 Dropdown 编码第三部分

9-5 Dropdown编码第四部分

9-6 Dropdown 总结

第10章高难度 - Message 组件（有难度）

13 节｜141分钟

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

08:10

第11章更好的展示方式 - 使用工具生成文档

内容更新中

第12章进入表单的世界 - Input 组件

内容更新中

第13章狸猫换太子 - Switch 组件

内容更新中

第14章魔高一丈- Select 组件（有难度）

内容更新中

第15章大一统- Form 组件（有难度）

内容更新中

第16章组件库打包以及发布

内容更新中

0 · 发表于 2023-7-27 02:31:26

提示: 作者被禁止或删除内容自动屏蔽

0 · 发表于 2023-7-28 00:51:07

合作愉快

0 · 发表于 2023-7-30 04:29:07

确实同步！

0 · 发表于 2023-8-1 00:53:38

欧豪还真的包更新来

0 · 发表于 2023-8-1 03:04:16

站长我微信联系你的那门课啥时候出？

0 · 发表于 2023-8-3 01:40:04

虽然不是最便宜的确实是质量最好的真心不错

0 · 发表于 2023-8-6 03:22:38

老客户了

0 · 发表于 2023-8-7 01:30:33

哇终于这门课出来了哈哈谢谢

0 · 发表于 2023-8-9 02:51:23

确实同步！

编辑推荐

Vue 3.0移动版商城实战开发(完结)

2周搞定人工智能必备数学基础(完结)

Java七大热门技术框架源码解析(超清完结)

物体检测-YOLO-实战系列

Java大型电商平台开发实战

大厂50万节点监控系统架构设计&Prometheus

ChatGPT入门实战课做AI时代更具竞争力的开

Golang基础（快速入门）

React18内核探秘：手写React高质量源码迈向

C#21天从入门到精通完结

路飞学城-Python开发+AI人工智能工程师(完

高性能多级网关与多级缓存架构落地实战

Vue3+Vite+Vant-UI 开发双端招聘APP(完结)

思否编程-自顶向下学 React 源码(完结)

React18+TS 通用后台管理系统解决方案落地

全新版FRIDA与安卓应用安全与逆向实战宝典