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

Vue3.3+TS4组件库打造指南

编辑点评

深入浅出Vue3.3与TypeScript4,从组件需求分析到打包发布,全面掌握组件库构建技巧。

⭐ 编辑推荐

系统学习Vue3.3和TypeScript4,打造媲美ElementPlus的组件库。


课程亮点

Vue3.3+TS4实战教程
组件库构建全流程
从需求分析到发布

课程目录

📁 8-通用组件 -Tooltip 组件
    8-2 安装并试用 Popper.js【优质资源‖关注:cunWorkNotes 解锁】.mp4  [75.8 MB]
    8-1 Tooltip 组件需求分析【整理不易‖记得关注:CunWorKNotes】.mp4  [29.1 MB]
    8-10 给 Tooltip 组件添加测试【不易整理‖请关注:CunWorkNoteS】.mp4  [104.7 MB]
    8-4 Tooltip 编码第二部分 - 支持动态事件.mp4  [97.8 MB]
    8-9 给 Tooltip 组件添加样式.mp4  [87.3 MB]
    8-7 Tooltip 编码第五部分 - 添加 popper 参数以及动画效果【整理不易‖记得关注:CunWorKNotes】.mp4  [72.6 MB]
    8-11 Tooltip 组件总结【持续更新‖免费提供:CunworknoteS】.mp4  [36.0 MB]
    8-3 Tooltip 编码第一部分 - 实现基本功能.mp4  [86.9 MB]
    8-6 Tooltip 编码第四部分 - 实现手动打开关闭.mp4  [70.0 MB]
    8-5 Tooltip编码第三部分 - 实现外侧点击关闭.mp4  [49.9 MB]
    8-8 Tooltip 编码第六部分 - 实现延时显示隐藏功能【资源精选‖更多关注:CunworkNotes】.mp4  [78.1 MB]
📁 2-Typescript 基础知识
    2-10 泛型(Generics) 第二部分 - 约束泛型.mp4  [16.6 MB]
    2-6 函数.mp4  [17.1 MB]
    2-4 数组和元组【持续更新‖免费提供:CunworknoteS】.mp4  [15.1 MB]
    2-14 声明文件 第二部分.mp4  [27.2 MB]
    2-13 声明文件 第一部分.mp4  [39.7 MB]
    2-15 内置类型【资源精选‖更多关注:CunworkNotes】.mp4  [25.2 MB]
    2-8 枚举(Enum).mp4  [17.7 MB]
    2-16 配置文件.mp4  [27.4 MB]
    2-5 Interface- 接口 初探.mp4  [8.8 MB]
    2-7 类型推论 联合类型和 类型断言【优质资源‖关注:cunWorkNotes 解锁】.mp4  [18.1 MB]
    2-12 类型别名,字面量 和 交叉类型.mp4  [16.6 MB]
    2-2 安装 Typescript【优质资源‖关注:cunWorkNotes 解锁】.mp4  [13.5 MB]
    2-3 原始数据类型和 Any 类型.mp4  [13.3 MB]
    2-1 什么是 Typescript 为什么要学习它【更多精选‖公众号:CunWorknotes】  .mp4  [24.1 MB]
    2-9 泛型(Generics) 第一部分.mp4  [18.3 MB]
    2-11 泛型第三部分 - 泛型在类和接口中的使用.mp4  [26.2 MB]
📁 电子书
    Vite 创建项目【优质资源‖关注:cunWorkNotes 解锁】.pdf  [612.2 KB]
    css【更多精选‖公众号:CunWorknotes】  .pdf  [1.6 MB]
    组件分析以及编码【更多精选‖公众号:CunWorknotes】  .pdf  [1.2 MB]
    Icon 组件.pdf  [703.0 KB]
    响应式基础.pdf  [977.0 KB]
    使用 Eslint【更多精选‖公众号:CunWorknotes】  .pdf  [1.2 MB]
    组件总结.pdf  [483.1 KB]
    基础知识.pdf  [2.9 MB]
    组件基础.pdf  [705.0 KB]
    为什么要有测试.pdf  [437.8 KB]
    将组件 Render 到 DOM 节点上.pdf  [506.7 KB]
    Vue3.3 升级内容.pdf  [759.3 KB]
    Button 分析及编码.pdf  [879.4 KB]
    本章简介.pdf  [455.3 KB]
    Vitest.pdf  [573.3 KB]
    Bundler+是什么?.pdf  [1.2 MB]
    本章导学.pdf  [303.3 KB]
    Vnode.pdf  [936.8 KB]
📁 7-组件测试
    7-4 安装 vue-test-utils 并且使用.mp4  [46.0 MB]
    7-9 为 Collapse 添加测试用例.mp4  [108.6 MB]
    7-6 Button 测试第三部分:学习使用 stub【不易整理‖请关注:CunWorkNoteS】.mp4  [69.7 MB]
    7-2 简介 Vitest 以及使用.mp4  [54.5 MB]
    7-12 整理测试用例.mp4  [92.0 MB]
    7-11 添加 Collapse 组件的事件测试 第二部分.mp4  [75.7 MB]
    7-1 为什么要有测试.mp4  [25.1 MB]
    7-10 测试Collapse 事件的第一种方式【优质资源‖关注:cunWorkNotes 解锁】.mp4  [41.7 MB]
    7-5 Button 测试用例第二部分.mp4  [58.0 MB]
    7-3 学习回调测试以及模拟第三方库实现【更多精选‖公众号:CunWorknotes】  .mp4  [96.3 MB]
    7-13 测试总结.mp4  [32.6 MB]
    7-7 学习 VNode 定义以及 Render Function.mp4  [66.2 MB]
    7-8 使用 Render Function 写组件以及了解JSX.mp4  [58.3 MB]
📁 4-万事开头难 - Button 组件
    4-9 添加CSS Reset.mp4  [58.1 MB]
    4-10 为 Button 添加样式.mp4  [127.1 MB]
    4-5 Button编码第二部分.mp4  [99.9 MB]
    4-8 添加色彩变量.mp4  [78.9 MB]
    4-4 安装使用 Vue Macros【公重号:CunWorkNotes】.mp4  [68.3 MB]
    4-3 Button 组件编码第一部分.mp4  [106.8 MB]
    4-6 选取 CSS 解决方案,现代样式解决方案一览【优质资源‖关注:cunWorkNotes 解锁】.mp4  [79.2 MB]
    4-11 使用 PostCSS 生成对应的CSS 颜色变量【资源精选‖更多关注:CunworkNotes】.mp4  [147.1 MB]
    4-7 色彩系统:当一次设计师.mp4  [85.1 MB]
    4-1 Button 组件架构设计以及需求分析【不易整理‖请关注:CunWorkNoteS】.mp4  [38.6 MB]
    4-12 Button 章节总结【优质资源‖关注:cunWorkNotes 解锁】.mp4  [41.5 MB]
    4-2 初始化项目以及项目文件结构.mp4  [35.9 MB]
📁 16-组件库的打包以及发布
    16-14【优质资源‖关注:cunWorkNotes 解锁】.mp4  [104.8 MB]
    16-12.mp4  [97.8 MB]
    16-13【资源精选‖更多关注:CunworkNotes】.mp4  [128.0 MB]
    16-6【整理不易‖记得关注:CunWorKNotes】.mp4  [140.2 MB]
    16-9【资源精选‖更多关注:CunworkNotes】.mp4  [99.2 MB]
    16-5 明确打包什么类型的模块【持续更新‖免费提供:CunworknoteS】.mp4  [87.4 MB]
    16-4 Vite 的工作原理【资源精选‖更多关注:CunworkNotes】.mp4  [159.8 MB]
    16-17【持续更新‖免费提供:CunworknoteS】.mp4  [154.9 MB]
    16-8【资源精选‖更多关注:CunworkNotes】.mp4  [114.1 MB]
    16-3 Bundler打包工具 简介.mp4  [105.1 MB]
    16-10.mp4  [108.1 MB]
    16-15.mp4  [139.7 MB]
    16-11【持续更新‖免费提供:CunworknoteS】.mp4  [116.1 MB]
    16-1 导学.mp4  [48.7 MB]
    16-18.mp4  [72.7 MB]
    16-16.mp4  [127.7 MB]
    16-2 Javascript 模块化历史.mp4  [116.6 MB]
    16-7.mp4  [82.9 MB]
📁 3- Vue3.0 结合 Typescript 基础知识全面补强
    3-15 setup语法第一部分【持续更新‖免费提供:CunworknoteS】.mp4  [28.9 MB]
    3-12 组合式函数【整理不易‖记得关注:CunWorKNotes】.mp4  [39.6 MB]
    3-10 组件基础-属性.mp4  [48.2 MB]
    3-11 组件自定义事件.mp4  [26.6 MB]
    3-16 setup 语法第二部分【持续更新‖免费提供:CunworknoteS】.mp4  [33.0 MB]
    3-13 创建 useURLLoader【公重号:CunWorkNotes】.mp4  [61.0 MB]
    3-6 响应式基础 - Ref 和 Reactive.mp4  [36.2 MB]
    3-14 useURLLoader 第二部分【公重号:CunWorkNotes】.mp4  [30.2 MB]
    3-1 Vue3 学习导学【整理不易‖记得关注:CunWorKNotes】.mp4  [5.3 MB]
    3-4 ESLint 简介和初步使用【整理不易‖记得关注:CunWorKNotes】.mp4  [40.0 MB]
    3-8 watch 监听器.mp4  [57.6 MB]
    3-9 生命周期和模版引用【持续更新‖免费提供:CunworknoteS】.mp4  [46.7 MB]
    3-5 ESLint 配合 Vite 设置更多规则【公重号:CunWorkNotes】.mp4  [54.5 MB]
    3-7 computed 计算属性.mp4  [26.5 MB]
    3-17 依赖注入第一部分.mp4  [41.2 MB]
    3-18 依赖注入第二部分.mp4  [27.9 MB]
    3-2 使用 vite 创建项目.mp4  [29.3 MB]
    3-19 Vue3.3更新简介【持续更新‖免费提供:CunworknoteS】.mp4  [43.2 MB]
    3-3 文件结构以及推荐插件.mp4  [46.0 MB]
📁 11-更好的展示方式 - 使用工具生成文档
    4【持续更新‖免费提供:CunworknoteS】.mp4  [280.9 MB]
📁 10-高难度 - Message 组件(有难度)
    2.mp4  [286.2 MB]
    3.mp4  [285.9 MB]
📁 1-课程介绍
    1-2 代码库使用注意事项.mp4  [19.8 MB]
    1-1 课程导学.mp4  [14.1 MB]
📁 12-进入表单的世界 - Input 组件
    5【资源精选‖更多关注:CunworkNotes】.mp4  [280.4 MB]
    6.mp4  [283.8 MB]
📁 15-大一统- Form 组件(有难度)
    10【不易整理‖请关注:CunWorkNoteS】.mp4  [276.5 MB]
    12.mp4  [369.6 MB]
    11.mp4  [282.3 MB]
📁 14-魔高一丈- Select 组件(有难度)
    8.mp4  [282.3 MB]
    9.mp4  [280.2 MB]
📁 5-更近一步 Collapse 组件
    5-2 Collapse 编码第一部分 基础编码.mp4  [79.1 MB]
    5-8 Collapse 组件总结【不易整理‖请关注:CunWorkNoteS】.mp4  [21.4 MB]
    5-7 Collapse 添加动画第二部分 - 尽善尽美.mp4  [41.5 MB]
    5-4 Collapse 编码第三部分支持 v-model【资源精选‖更多关注:CunworkNotes】.mp4  [83.4 MB]
    5-3 Collapse 编码第二部分 - 使用 Context 完成父子属性传递.mp4  [76.1 MB]
    5-6 Collapse 添加下拉动画 - 动态计算高度(难点).mp4  [61.9 MB]
    5-5 Collapse 添加样式以及原生 Transition 组件【整理不易‖记得关注:CunWorKNotes】.mp4  [103.5 MB]
    5-1 Collapse 组件架构设计以及需求分析.mp4  [60.7 MB]
📁 13-狸猫换太子 - Switch 组件
    7.mp4  [282.2 MB]
📁 9-现学现卖 - Dropdown 组件
    1.mp4  [281.6 MB]
📁 6-它山之石 - Icon 组件
    6-4 看看怎么样 - 为 Button 以及 Collapse 添加图标.mp4  [88.2 MB]
    6-3 Icon 组件编码第一部分 - 完善功能以及样式添加【更多精选‖公众号:CunWorknotes】  .mp4  [67.0 MB]
    6-2 Icon 组件编码第一部分 - 基本实现【资源精选‖更多关注:CunworkNotes】.mp4  [80.7 MB]
    6-1 图标库发展历程简介以及 Fontawesome 的安装使用.mp4  [75.9 MB]
    6-5 Icon组件总结【不易整理‖请关注:CunWorkNoteS】.mp4  [48.9 MB]
📁 资料代码
    v-element-master.exe  [440.1 KB]
    vue3-basic-master.exe  [351.0 KB]
    typescript-basic-master.exe  [323.4 KB]

适合人群

  • Vue开发者
  • 前端工程师
  • 组件库爱好者

学习收获

掌握Vue3.3组件开发
精通TypeScript4使用
构建并发布个人组件库

祝您学习愉快!

学有所成,前程似锦!