课程介绍

开发环境搭建

Windows 开发环境搭建

Mac 开发环境搭建

常见报错解决办法

sass 报错解决办法

VSCode 报错解决办法

WebStorm 报错解决办法

不想总是打开 shims-vue.d.ts 来解决 TS

使用 Vite 搭建官网

初始化项目

安装并初始化 vue-router

创建首页和文档页

封装 Topnav

用 provide 和 inject 实现切换功能

手机页面上的切换按钮

路由间切换

基本完成官网

每个章节介绍以及题目、源代码

制作 Switch 组件

初始化 switch 组件

切换开关状态

添加 value属性和 input 事件

父子组件通信

小结

Vue 3 新版 v-model 用法

如何借chao鉴xi别人的皮肤

知识点总结

制作 Button 组件

创建 Button 组件

Vue 3 属性绑定细节

props vs attrs

Button 基础样式

库 CSS 的两个注意事项

CSS最小影响原则

完成 Button 组件

制作 Dialog 组件

Dialog需求分析与API设计

创建Dialog组件

让Dialog支持visible属性

让Dialog支持点击关闭

使用具名插槽

使用Teleport

一句代码打开 Dialog

制作 Tabs 组件（上）

创建 Tabs 和 Tab 组件

如何检查子组件的类型

渲染嵌套的插槽

显示被选中的导航

显示被选中的内容，失败第一次

显示被选中的内容，失败第二次

失败了两次，最终使用 CSS 切换内容

制作 Tabs 组件（下）

动态设置 div 的宽度

动态设置 div 的位置

三处优化代码

selectedItem.value is null 错误解决过程

总结

尤雨溪帮我改bug

官网装修 - 首页

整体效果预览

从图片中取色

首页渐变背景

给文字和链接添加样式

使用 iconfont.cn 添加 logo 和 icon

使用 clip-path 画圆弧

完善首页的各种细节

官网装修 - 文档页（上）

BUG 反馈

高亮当前路由

引入 Github 的 Markdown 样式

支持 import markdown 文件

选看：解释一下 md.js

事不过三，消除重复

官网装修 - 文档页（下）

你的代码有什么缺点

展示源代码

小优化：使用 component

五彩斑斓的源代码

神奇的封装：Demo 组件

追求完美，永无止境

发布源代码至 npm（上）

解决上节课的遗留问题

部署 GitHub Pages 发现 404

成功部署官网到 GitHub

一键部署

修复 Tabs 组件的 bug

显示或隐藏代码

发布源代码至 npm（下）

rollup -c 编译库文件

解释 rollup.config.js

npm login 和 npm publish

模拟别人使用自己的组件

修复 watchEffect

再次完善官网

部署到码云

把项目加到简历，Vue 2 如何升级到 Vue 3

饥人谷

Vue3 造轮子

目前 Vue 3 的版本已经是 3.0.0-rc.x 了，现在学 Vue 3 是不是合适的时间点呢？回答：是的，非常合适！
本课程手把手教你打造真实可用的UI框架，拒绝枯燥的原理讲解直接上手实操，带你掌握 Vue 3 Composition API；掌握 Vite 开发与部署流程；掌握 TypeScript 最佳实践；掌握 Vue Router 4 的使用！

Vue3 造轮子

讲师介绍

课程详情