如果你已经会写 Vue2 的页面，也能照着文档拼出 setup 语法，但一到"从零实现一个 Dialog"就开始卡壳——这个课就是冲着这个缺口来的。造轮子不是为了发 npm 包，而是把"我调用过它"变成"我知道它内部怎么转"。
先确认自己缺的是哪一块
这门课的门槛不低，也不该低。它默认你能看懂单文件组件、知道 props 和 emit 是干什么的，也用过 v-model。真正的分水岭在于：你是否清楚 v-model 在 Vue3 里是 modelValue + update:modelValue 的语法糖？是否知道 attrs 透传、slots 命名插槽、provide/inject 三者分别解决什么问题？如果这些还模糊，那么做 Switch 的时候你会写出来一个能跑但处处别扭的东西——状态被父组件和子组件来回改，最后不知道谁说了算。
课程从 Vite 起项目这一步开始，看似平淡，其实是很多人第一个卡点：看到 index.html 里的挂载点、main.ts 与 App.vue 的分工就开始晕。把环境这关过了，后面的组件才有地方安放。
轮子挑得有讲究，不是随手凑数
Switch、Button、Dialog、Tabs 这四个，恰好覆盖了组件开发的四种典型难题，而不是四道重复题。
- Switch 考的是受控与非受控：父组件传值、子组件要通知、用户点击又要即时反馈，这三个方向的同步没处理好，就会出现"点了没反应"或"关不掉"。
- Button 看着最简单，真正要处理的是 loading 态下的点击拦截、不同类型的类名组织，以及禁用与加载同时出现时的优先级。
- Dialog 是本节最硬的一块：内容要渲染到 body 之外（否则被父级 overflow 裁掉）、要处理遮罩点击关闭、ESC 关闭、打开时锁滚动、关闭后清理。这些细节不写一遍，光看文档是记不住的。
- Tabs 则把插槽和动态组件摆上台面，同时涉及选中态与内容的对应关系。
你会发现每个组件的难点都不在"写出来"，而在"边界情况怎么办"。课程把常见报错单独拎出来讲，用的就是这些场景。
看完应该能回答这几个问题
判断自己有没有学到，不看笔记看能不能答上来：
- 一个组件被父组件传入的值和它自己的内部状态冲突时，该以谁为准，为什么？
- 为什么弹窗组件常常要借助 teleport，直接写在模板里会踩什么坑？
- v-model 在一个自定义组件上到底展开了什么？多个 v-model 又怎么写？
- 当组件里报了"未定义的属性"或者样式不生效，通常先查哪几处？
答不上来，说明只是抄了一遍代码；能用自己的话说清楚，才算真的过了这关。
配套练习别省
造轮子这类内容，光看不练等于没看。建议的顺序是：先跟着把环境跑起来，然后关掉参考实现，自己写一遍 Switch 和 Button，卡住了再回头看。Dialog 和 Tabs 允许先抄后改，但至少要做一次改写——比如把 Dialog 改成支持自定义头部插槽，给 Tabs 加一个懒加载。这种"在别人代码上动刀"的过程，比从头默写更接近真实项目。
如果你只是想快速上手 Vue3 写业务，这门课可能偏重了；但如果你已经在项目里被组件通信和边界情况折磨过，想弄清楚到底哪里没想明白，那就对了。
Vue3造轮子
课程详情
课程介绍
本课程深入浅出地讲解了Vue3框架下的组件开发，从基础环境搭建到高级组件制作，全面覆盖Vue3的核心特性。
适合人群
- 有基础的Vue2开发者，希望快速掌握Vue3
- 对前端开发感兴趣，想要学习组件化开发的工程师
- 希望提升自己项目开发能力的开发者
学习收获
- 掌握Vue3框架下的组件开发流程
- 学会使用vite搭建项目环境
- 了解并解决常见报错问题
- 制作实用的Switch、Button、Dialog、Tabs等组件
课程亮点
- 从零开始，逐步深入，适合不同水平的学习者
- 结合实际项目案例，学以致用
- 详细讲解常见报错，避免开发过程中的困扰
- 提供完整的项目结构，方便学习和实践
课程目录
1-课程介绍
Vue 3 造轮子课程介绍
2-开发环境搭建
0-课程介绍.png
1-windows开发环境搭建.png
2-mac环境搭建.png
3-Volar-Vue终极开发神器！.png
4-课后习题.png
3-常见报错解决办法
1-props.ok.()报错.png
2-rollup -c 报错 error Unexpected.png
3.png
4..png
5.png
6.png
7.png
8.png
9.png
10.png
11.png
4-使用vite搭建官网
0-本章介绍.txt
1-创建项目
2-初始化项目
3-安装并初始化 vue-router
4-创建首页和文档页
5-封装 Topnav
6-用 provide 和 inject 实现切换功能
7-手机页面上的切换按钮
8-路由间切换
9-基本完成官网
10-课后习题.png
5-制作 Switch 组件
0-本章介绍.png
1-初始化 switch 组件
2-切换开关状态
3-添加 value属性和 input 事件
4-父子组件通信
5-小结
6-Vue 3 新版 v-model 用法
7-如何借chao鉴xi别人的皮肤
8-知识点总结
9-课后习题.png
源码领取.txt
6-制作button组件
0-文本.txt
0-本章介绍.png
1-创建 Button 组件
2-Vue 3 属性绑定细节
3-Button 基础样式
4-库 CSS 的两个注意事项
5-CSS最小影响原则
6-完成 Button 组件
7-推荐 Wired Elements
课后习题.png
7-制作 Dialog 组件
0-文本.txt
0-本章介绍.png
1-Dialog需求分析与API设计
2-创建Dialog组件
3-让Dialog支持visible属性
4-让Dialog支持点击关闭
5-让Dialog支持title和content
6-使用具名插槽
7-使用Teleport
8-一句代码打开 Dialog
课后习题.png
8-制作 Tabs 组件
0-文本.txt
0-本章介绍.png
1-创建 Tabs 和 Tab 组件
2-如何检查子组件的类型
3-渲染嵌套的插槽
4-显示被选中的导航
5-显示被选中的内容，失败第一次
6-显示被选中的内容，失败第二次
7-失败了两次，最终使用 CSS 切换内容
8-动态设置 div 的宽度
9-动态设置 div 的位置
10-三处优化代码
11-selectedItem.value is null 错误解决过程
12-总结
13-尤雨溪帮我改bug
讲义
-9-11-11-29-17.pptx
-9-11-11-30-19.pdf
课后习题.png
9-官网装修 - 首页
0-文本.txt
0-本章介绍.png
1-整体效果预览
2-从图片中取色
3-首页渐变背景
4-给文字和链接添加样式
5-使用 iconfont.cn 添加 logo 和 icon
6-使用 clip-path 画圆弧
7-完善首页的各种细节
8-总结
课后习题.png
10-官网装修 - 文档页
0-BUG反馈.png
0.0-文本.txt
0.0-本章介绍.png
1-创建更多路由
1-文本.txt
2-高亮当前路由
3-引入 Github 的 Markdown 样式
4-支持 import markdown 文件
5-选看：解释一下 md.ts
6-事不过三，消除重复
7-你的代码有什么缺点
8-展示源代码
9-小优化：使用 component
10-五彩斑斓的源代码
11-神奇的封装：Demo 组件
12-追求完美，永无止境
讲义
-9-18-17-16-18.pptx
课后习题.png
11-发布源代码至 npm
0-本章介绍.png
0-本章介绍.txt
1-解决上节课的遗留问题
2-部署 GitHub Pages 发现 404
3-成功部署官网到 GitHub
4-一键部署
5-修复 Tabs 组件的 bug
6-显示或隐藏代码
7-rollup -c 编译库文件
8-解释 rollup.config.js
9-npm login 和 npm publish
10-模拟别人使用自己的组件
11-修复 watchEffect
12-再次完善官网
13-部署到码云
14-把项目加到简历，Vue 2 如何升级到 Vue 3
讲义
-9-25-8-27-13.pptx
课后习题.png
12-【完结】
本章介绍.png
课程简介.png
