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





![[衡天云]爆款云服务器 低至12元/月](/hty.png)