Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库(超清完结)

vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库(官方同步至15章) 高难度+最新技术栈，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 技术栈（必须） 环境参数 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 章节目录： 第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章 组件测试 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 第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 第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 第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 第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 第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 第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 第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 声明：本站所有资料均来源于网络以及用户发布，如对资源有争议请联系微信客服我们可以安排下架！