首页 实战

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

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

已完结
|
难度：高级
|
时长：共 25 小时
前端畅销榜第 4 名
￥399.00
距离活动结束
立即购买
加购物车
已有 444 人在学
  • 最新：最新Vue3.3及相关技术
  • 规范：大厂开发模式/代码规范
  • 最全：10+典型组件开发方法
  • 思维：提升大型项目架构思维
  • 深度：高难度组件设计思想
  • 全流程：测试，文档生产，打包
试看本节课 06:26
试看本节课 04:24
1-1 课程导学
1-2 代码库使用注意事项

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
在互联网就业形式越来越严峻的今天，掌握一项具有强竞争力的技能尤其重要。复杂组件库研发因其涉及的技术难度和广度无疑成为最好的选择。本课程带你使用最新技术栈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/

本章介绍：

本章主要帮助大家理解 TypeScript 可以解决的问题和所带来的优势，带领大家学习 TS 中的各种基础类型，然后进阶到复杂类型，包括：Array, Tuple, interface, function, Class, Enum, Generices等，迅速帮助大家理解 TS 的基础使用方式和语法。

第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

本章介绍：

从 vite 创建项目开始，学习使用一系列插件以及 ESlint打造完美开发环境，接下来带领大家学习 compostion API，自定义Hooks， setup 语法， 依赖注入等一系列 vue3 的重大更新。

第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

本章介绍：

本章开始完成第一个组件，创建通用项目结构以及规范，实现组件编码过程中，穿插安装vue-marcos 插件增强，选用 postcss 作为样式解决方案，为组件库开发打下坚实基础。

第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

本章介绍：

本章进入一个新的组件开发 - Collpase，从这个组件，可以学习到Vue 复杂组件的组合设计思想，Context 传递，v-model 的实现，以及使用 Transition 完成动画的过程。

第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

本章介绍：

本章进入Icon 组件的开发，这里二次开发 FontawesomeIcon 实现对应的内容，从而总结出二次开发组件的基本原则和方法。

第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

本章介绍：

本章从什么是测试入手，简介了测试的基本概念，介绍通用测试工具 Vitest 和 测试框架 Vue-test-utils，然后使用这两种工具完成Button组件和 Collapse 组件的单元测试，并且在这个过程中学习 Render Function 以及 VNode 的原理。

第7章 组件测试
13 节｜133分钟
展开
  • 视频：
    7-1 为什么要有测试
    08:07
  • 视频：
    7-2 简介 Vitest 以及使用
    13:14
  • 视频：
    7-3 学习回调测试以及模拟第三方库实现
    14:36
  • 视频：
    7-4 安装 vue-test-utils 并且使用
    08:50
  • 视频：
    7-5 Button 测试用例第二部分
    09:54
  • 视频：
    7-6 Button 测试第三部分：学习使用 stub
    10:33
  • 视频：
    7-7 学习 VNode 定义以及 Render Function
    09:59
  • 视频：
    7-8 使用 Render Function 写组件以及了解JSX
    12:02
  • 视频：
    7-9 为 Collapse 添加测试用例
    12:48
  • 视频：
    7-10 测试Collapse 事件的第一种方式
    05:32
  • 视频：
    7-11 添加 Collapse 组件的事件测试 第二部分
    09:39
  • 视频：
    7-12 整理测试用例
    10:17
  • 视频：
    7-13 测试总结
    07:09

本章介绍：

本章要完成 Tooltip 组件的开发，它作为第一个通用组件，可以为一系列其他组件作为蓝图，在整个过程中，我们回学习 popper.js 的使用，动态事件，创建 useClickOutside, defineExpose，debounce 等一众功能。

第8章 通用组件 -Tooltip 组件
11 节｜113分钟
展开
  • 视频：
    8-1 Tooltip 组件需求分析
    05:49
  • 视频：
    8-2 安装并试用 Popper.js
    10:48
  • 视频：
    8-3 Tooltip 编码第一部分 - 实现基本功能
    14:34
  • 视频：
    8-4 Tooltip 编码第二部分 - 支持动态事件
    12:23
  • 视频：
    8-5 Tooltip编码第三部分 - 实现外侧点击关闭
    10:41
  • 视频：
    8-6 Tooltip 编码第四部分 - 实现手动打开关闭
    09:25
  • 视频：
    8-7 Tooltip 编码第五部分 - 添加 popper 参数以及动画效果
    09:10
  • 视频：
    8-8 Tooltip 编码第六部分 - 实现延时显示隐藏功能
    11:02
  • 视频：
    8-9 给 Tooltip 组件添加样式
    10:16
  • 视频：
    8-10 给 Tooltip 组件添加测试
    12:31
  • 视频：
    8-11 Tooltip 组件总结
    06:13

本章介绍：

在本章会根据上一章所学的通用组件作为基础进行扩展，完成下拉菜单组件的二次开发。在这个过程中学习不同于 Collapse 子组件思路，并且还学习了 jsx 书写组件的方式，并且比较两者的利弊。

第9章 现学现卖 - Dropdown 组件
6 节｜66分钟
展开
  • 视频：
    9-1 Dropdown 需求分析
    05:16
  • 视频：
    9-2 Dropdown 编码第一部分
    15:17
  • 视频：
    9-3 Dropdown 编码第二部分
    07:26
  • 视频：
    9-4 Dropdown 编码第三部分
    14:39
  • 视频：
    9-5 Dropdown编码第四部分
    14:59
  • 视频：
    9-6 Dropdown 总结
    07:40

本章介绍：

本章我们将迎来一个不小的挑战，完成 Message 组件，它是第一个函数式调用的组件。在这个过程中，我们会通过巧妙的方式实现多个组件的创建以及定位，有非常多高级的知识点。

第10章 高难度 - Message 组件（有难度）
13 节｜141分钟
展开
  • 视频：
    10-1 Message 组件需求分析
    06:31
  • 视频：
    10-2 Message 组件编码第一部分
    11:45
  • 视频：
    10-3 createMessage 第一部分编码
    10:31
  • 视频：
    10-4 createMessage 编码第二部分
    07:19
  • 视频：
    10-5 createMessage 编码第三部分
    08:14
  • 视频：
    10-6 createMessage 编码第四部分
    12:49
  • 视频：
    10-7 createMessage 编码第五部分
    10:18
  • 视频：
    10-8 createMessage 编码第六部分
    10:22
  • 视频：
    10-9 createMessage 编码第七部分
    13:56
  • 视频：
    10-10 createMessage 编码第八部分
    13:32
  • 视频：
    10-11 createMessage 编码第九部分 添加样式以及动画
    12:11
  • 视频：
    10-12 createMessage 编码第十部分
    14:36
  • 视频：
    10-13 Message 组件总结
    08:10

本章介绍：

这一章我们话锋一转，学习使用怎样的工具生成组件文档以及完成展示的任务，会学习使用两种目前最火的文档生成工具，并且进行对比。

第11章 更好的展示方式 - 使用工具生成文档
9 节｜78分钟
展开
  • 视频：
    11-1 Vitepress 简介
    05:15
  • 视频：
    11-2 VitePress 安装和初步使用
    11:19
  • 视频：
    11-3 Vitepress 路由系统
    10:11
  • 视频：
    11-4 Vitepress 支持组件写法
    07:17
  • 视频：
    11-5 Vitepress 添加自定义样式
    08:45
  • 视频：
    11-6 添加 demo-preview 插件
    13:21
  • 视频：
    11-7 Vitepress 自定义主题颜色
    09:09
  • 视频：
    11-8 Vitepress 为生产环境打包
    05:59
  • 视频：
    11-9 Vitepress 总结
    06:18

本章介绍：

本章我们正式进入表单的世界，接触表单王国的第一个重要组件 Input，作为表单中最重要的一个元素。完成一个比原生 input 功能更丰富的实现。

第12章 进入表单的世界 - Input 组件
10 节｜108分钟
展开
  • 视频：
    12-1 Input 需求分析
    09:49
  • 视频：
    12-2 Input 编码第一部分搭建框架
    10:55
  • 视频：
    12-3 Input 测试用例编写以及引出 TDD 的开发方式
    10:35
  • 视频：
    12-4 Input 编码第二部分支持 v-model
    13:30
  • 视频：
    12-5 Input 编码第三部分 支持按钮清空当前文本
    12:25
  • 视频：
    12-6 Input编码第四部分 支持密码切换
    13:21
  • 视频：
    12-7 Input 编码第五部分 支持事件
    12:06
  • 视频：
    12-8 Input 编码第六部分：组件添加原生属性
    09:12
  • 视频：
    12-9 Input 组件界面测试以及改进
    11:31
  • 视频：
    12-10 Input开发总结
    03:50

本章介绍：

在本章我们将学习怎样完成表单基础组件的一个变种，从这个过程中解决非常有意思的样式问题。

第13章 狸猫换太子 - Switch 组件
6 节｜53分钟
展开
  • 视频：
    13-1 Switch组件需求分析
    05:10
  • 视频：
    13-2 Switch 编码第一部分
    08:14
  • 视频：
    13-3 Switch 编码第二部分 样式游戏
    12:30
  • 视频：
    13-4 Switch 编码第三部分
    11:02
  • 视频：
    13-5 Switch组件编码第四部分
    11:05
  • 视频：
    13-6 Switch 开发总结
    04:16

本章介绍：

本章学习一个最有挑战性的组件开发 - Select，在这个过程中会学习完成一个复杂，多需求组件的通用开发方式和流程，抽丝剥茧，一步步的完成。

第14章 魔高一丈- Select 组件（有难度）
14 节｜151分钟
展开
  • 视频：
    14-1 1 Select 需求分析
    08:05
  • 视频：
    14-2 2 Select 编码第一部分 基本结构
    12:17
  • 视频：
    14-3 3 Select 编码第二部分 选中选项功能
    11:24
  • 视频：
    14-4 4 Select 编码第三部分 初步添加样式
    11:22
  • 视频：
    14-5 5 Select 编码第四部分 添加箭头图标 添加外侧点击关闭
    12:33
  • 视频：
    14-6 6 Select编码第五部分 支持清空
    10:41
  • 视频：
    14-7 7 Select编码第六部分 支持自定义模版
    08:37
  • 视频：
    14-8 8 Select 编码第七部分 支持筛选
    11:39
  • 视频：
    14-9 9 Select 编码第八部分 完善筛选功能
    10:13
  • 视频：
    14-10 Select编码第九部分 支持远程搜索
    13:07
  • 视频：
    14-11 11 Select 编码第十部分 远程请求添加防抖
    09:00
  • 视频：
    14-12 12 Select 编码第十一部分 支持键盘操作
    09:17
  • 视频：
    14-13 13 Select 编码第十二部分 完善键盘操作功能
    13:09
  • 视频：
    14-14 14 Select 总结
    08:47

本章介绍：

本章要完成最复杂的组件 - Form 表单组件，通过这个组件，学习使用复杂组件的分析过程，公共 store 抽取，动态数据更新，表单验证，renderProps 以及 组件暴露实例方法等一系列高阶的知识点。

第15章 大一统- Form 组件（有难度）
14 节｜156分钟
展开
  • 视频：
    15-1 Form 需求分析
    10:32
  • 视频：
    15-2 Form 编码第一部分 - 基础结构
    08:17
  • 视频：
    15-3 Form 编码第二部分 - 添加数据和规则
    12:01
  • 视频：
    15-4 Form 组件第三部分 - 获取数据和规则
    11:47
  • 视频：
    15-5 Form编码第四部分 - 学习使用 async-validator
    11:34
  • 视频：
    15-6 Form 编码第五部分 - FormItem 完成验证
    12:12
  • 视频：
    15-7 Form编码第六部分 - 自动触发验证
    10:25
  • 视频：
    15-8 Form 编码第七部分 - 添加 trigger 条件
    08:09
  • 视频：
    15-9 Form 组件第八部分 - 父子组件通信
    10:12
  • 视频：
    15-10 Form 编码第九部分 - 完成表单整个验证功能
    14:51
  • 视频：
    15-11 Form编码第十部分 - 添加重置状态功能
    12:37
  • 视频：
    15-12 Form编码第十一部分 - 添加样式
    12:05
  • 视频：
    15-13 Form 编码第十二部分 - 最终整合
    10:33
  • 视频：
    15-14 Form 总结
    10:30

本章介绍：

本章先介绍 Rollup 的概念以及简单使用，然后学习使用 Rollup 插件以及配置文件生成多种 Javascript 模块格式。最后到介绍了怎样将组件库发布到 npm。

第16章 组件库打包以及发布
18 节｜154分钟
展开
  • 视频：
    16-1 导学
    05:20
  • 视频：
    16-2 Javascript 模块化历史
    09:37
  • 视频：
    16-3 Bundler打包工具 简介
    08:28
  • 视频：
    16-4 Vite 的工作原理
    11:11
  • 视频：
    16-5 明确打包什么类型的模块
    07:59
  • 视频：
    16-6 了解 Vue3 的插件系统
    10:08
  • 视频：
    16-7 创建组件的入口文件
    08:32
  • 视频：
    16-8 简介 Rollup 的配置文件以及插件系统
    08:29
  • 视频：
    16-9 打包组件库第一部分 - 小试牛刀
    07:28
  • 视频：
    16-10 打包组件库第二部分 - 配置 rollup
    08:05
  • 视频：
    16-11 组件库打包第三部分 - 生成类型定义文件
    08:39
  • 视频：
    16-12 组件库打包第四部分- 生成样式文件
    07:18
  • 视频：
    16-13 组件库打包第五部分 - 拆分构建脚本
    09:16
  • 视频：
    16-14 npm link 测试打包内容
    09:10
  • 视频：
    16-15 最终修正打包信息
    09:20
  • 视频：
    16-16 npm简介
    09:37
  • 视频：
    16-17 发布到 npm
    08:11
  • 视频：
    16-18 打包发布总结
    06:33
本课程已完结
适合人群
软件开发人员
互联网从业者
前端开发工程师
技术储备
熟悉 HTML CSS JS（必须）
了解 Vue3 技术栈（必须）
环境参数
Vue 3.3 3.3
Typescript 4.7
Vite 4.0.0
Vitepress 1.0.0
Vitest 0.29.2
Vue-test-utils 2.3.0
张轩
高级前端工程师， 已有50672个学生
其他课程： 《Vue3 + TS 仿知乎专栏企业级项目》
全部
不为别的，只为提升面试通过率
尽管课程时间很长，
但没关系，我们有老师的陪伴，
还有同学之间互相鼓励，彼此帮助，
完成学习后，还能获得慕课网官方认证的证书。
立即购买
vue3.0企业级应用&组件库开发
套餐价格：¥672.00
2门课 总价：¥747.00
立即购买
 课程介绍

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

高级  · 444人报名 ¥399.00
课程介绍 

Vue3 + TS 仿知乎专栏企业级项目

中级  · 3138人报名 ¥348.00
Vue3从入门到组件库开发
套餐价格：¥911.00
3门课 总价：¥1,013.00
立即购买
 课程介绍

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

高级  · 444人报名 ¥399.00
课程介绍 

Vue3入门与项目实战 掌握完整知识体系

初级  · 3330人报名 ¥348.00
课程介绍 

专为小白设计的TypeScript入门课

初级  · 2240人报名 ¥266.00
Vue 全栈+自研，进击高级工程师
套餐价格：¥719.00
2门课 总价：¥798.00
立即购买
 课程介绍

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

高级  · 444人报名 ¥399.00
课程介绍 

Vue3+NestJS 全栈开发企业级管理后台

中级  · 219人报名 ¥399.00
Vue从入门到进阶
套餐价格：¥676.00
2门课 总价：¥747.00
立即购买
 课程介绍

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

高级  · 444人报名 ¥399.00
课程介绍 

Vue3入门与项目实战 掌握完整知识体系

初级  · 3330人报名 ¥348.00
vue+react 组件库开发实战，进阶高阶技能
套餐价格：¥718.00
2门课 总价：¥798.00
立即购买
 课程介绍

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

高级  · 444人报名 ¥399.00
课程介绍 

React18+TS+Vite 从0到1自定义组件库 实战复杂项目

中级  · 119人报名 ¥399.00
查看更多
数据加载中...
查看更多好课
《Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库》的真实评价
综合评分：分，共 人参与
篇幅原因，只展示最近100条评价
￥399.00
立即购买
加购物车

学习咨询

选课、学习遇到问题？

扫码添加指导老师 1V1 帮助你！

添加后老师会第一时间解决你的问题

意见反馈 帮助中心 APP下载
官方微信