1-使用 Vite 搭建官网
创建项目
初始化项目
安装并初始化 vue-router
创建首页和文档页
封装 Topnav
用 provide 和 inject 实现切换功能
手机页面上的切换按钮
路由间切换
基本完成官网
2-制作 Switch 组件
初始化 switch 组件
切换开关状态
添加 value属性和 input 事件
父子组件通信
小结
Vue 3 新版 v-model 用法
如何借鉴别人的皮肤
知识点总结
3-制作 Button 组件
创建 Button 组件
Vue 3 属性绑定细节
props vs attrs
Button 基础样式
库 CSS 的两个注意事项
CSS最小影响原则
完成 Button 组件
推荐 Wired Elements
4-制作 Dialog 组件
Dialog需求分析与API设计
创建Dialog组件
让Dialog支持visible属性
让Dialog支持点击关闭
让Dialog支持title和content
使用具名插槽
使用Teleport
一句代码打开 Dialog
5-制作 Tabs 组件
创建 Tabs 和 Tab 组件
如何检查子组件的类型
渲染嵌套的插槽
显示被选中的导航
显示被选中的内容，失败第一次
显示被选中的内容，失败第二次
失败了两次，最终使用 CSS 切换内容
动态设置 div 的宽度
动态设置 div 的位置
三处优化代码
selectedItem.value is null 错误解决过程
总结
6-官网装修 - 首页
整体效果预览
从图片中取色
首页渐变背景
给文字和链接添加样式
使用 iconfont.cn 添加 logo 和 icon
使用 clip-path 画圆弧
完善首页的各种细节
总结
7-官网装修 - 文档页
BUG 反馈
创建更多路由
高亮当前路由
引入 Github 的 Markdown 样式
支持 import markdown 文件
解释一下 md.ts
事不过三，消除重复
你的代码有什么缺点
展示源代码
小优化：使用 component
五彩斑斓的源代码
神奇的封装：Demo 组件
追求完美，永无止境
8-发布源代码至 npm
解决遗留问题
部署 GitHub Pages 发现 404
成功部署官网到 GitHub
一键部署
修复 Tabs 组件的 bug
显示或隐藏代码
rollup -c 编译库文件
解释 rollup.config.js
npm login 和 npm publish
模拟别人使用自己的组件
修复 watchEffect
再次完善官网
部署到码云
源代码仓库地址 - 感兴趣的可以下载，结合博客一步步实现该项目
下一篇： 小程序项目 - 电商优购
