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