本章学习回顾
本章围绕知识付费首页项目的样式开发展开，综合运用了 Vue 3 组件化开发、CSS 框架（UnoCSS）、以及多种布局方案，完成了首页主要页面的样式设计与交互实现。
核心知识体系
1. Flex 布局复习与应用
在首页各个模块的开发中，Flex 布局是最基础也是最高频使用的布局方案：
display: flex-- 弹性容器justify-content/align-items-- 主轴与交叉轴对齐flex-wrap-- 换行控制- 配合 UnoCSS 使用
flex、items-center、justify-between等原子类快速实现
2. 组件间传参（4种方式）
| 传参方式 | 方向 | 适用场景 |
|---|---|---|
| Props | 父 -> 子 | 数据下传，最基本的方式 |
| Emit / defineEmits | 子 -> 父 | 事件上报，如 Swiper 的 slideChange |
| 依赖注入 (Provide/Inject) | 跨层级 | 深层嵌套组件通信，避免逐层传递 |
| 状态管理 (Pinia) | 全局 | 多组件共享状态，如用户信息、购物车数据 |
3. $attrs 属性透传
当需要给自定义组件传递未在 Props 中定义的属性时，使用 v-bind="$attrs" 进行透传：
<!-- 子组件：接收并透传未定义的属性 -->
<template>
<Swiper v-bind="$attrs">
<slot />
</Swiper>
</template>
vue
注意事项：
- 透传的属性可以覆盖组件内部已有的默认属性
- 必须使用
:propName="true"的绑定语法，简写形式propName不会生效 - 配合
v-if="!$attrs.someHide"可动态控制子组件内容的显示
4. Grid 布局
Grid 布局适合实现多行多列的复杂网格效果，相比 Flex 在二维布局场景更具优势：
display: grid-- 网格容器grid-template-columns/grid-template-rows-- 定义行列repeat()/minmax()/fr单位 -- 灵活定义尺寸grid-template-areas-- 命名区域，像搭积木一样布局grid-column/grid-row-- 单元格跨行跨列
5. 深度选择器（Deep Selector）
当需要修改子组件内部样式时，使用 :deep() 深度选择器穿透 Scoped 样式：
<style lang="scss" scoped>
.card:hover {
:deep(p) {
color: white;
}
}
</style>
vue
使用场景：当 group-hover 等 Tailwind/UnoCSS 工具类无法穿透到子组件内部元素时，深度选择器是最直接的解决方案。
6. Hover 交互效果
卡片 hover 效果的实现方案：
/* 过渡动画 */
transition: all 0.3s ease;
/* hover 状态 */
transform: translateY(-4px); /* 上浮效果 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */
css
配合 UnoCSS 使用：
<a class="card transition-all hover:(shadow-lg -translate-y-1)">
<Card />
</a>
vue
7. 嵌套路由
详情页采用嵌套路由结构：
pages/study/
├── study.vue # 父组件（侧边栏 + 顶栏）
└── [id].vue # 子路由（内容区域）
text
父组件提供公共布局（侧边栏、课程名称），子路由通过 <NuxtPage /> 或 <router-view /> 渲染内容。
8. Markdown 集成
图文类内容页面（课程介绍、项目详情等）使用 vite-plugin-vue-markdown 集成 Markdown 渲染：
- 编辑效率远高于手写 DOM 结构
- 支持在 Markdown 中直接使用 Vue 组件（Markdown 与 Vue 混用）
- 适用于 ChatGPT 风格的动态 Markdown 渲染场景
9. Teleport 组件
Vue 3 的 <Teleport> 组件用于将 DOM 节点挂载到 body 或其他指定容器上：
<Teleport to="body">
<Modal v-if="showModal" />
<Toast v-if="showToast" />
</Teleport>
vue
优势：避免手动 append/remove DOM 节点，由 Vue 框架统一管理生命周期。
10. 响应式布局优化
| 页面 | 优化内容 |
|---|---|
| 首页 | Grid 响应式断点：sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 |
| 学习页面 | 每日一课区域：宽屏两列，窄屏三列 |
| 精品微课 | 移动端左右滚动，不损害宽屏展示效果 |
| 关于页面 | 响应式图片，自适应布局 |
待完成作业
- 关于我们页面：参考其他页面的开发模式，自行完成响应式布局
- 移动端"我的"页面：替代"关于我们"，适合移动端查看的个人中心
- Grid 布局作业：使用 Grid 实现课程网格展示效果
技术栈总结
本章涉及的核心技术栈：
- Vue 3 -- Composition API、defineProps、defineEmits、Teleport、$attrs
- UnoCSS -- 原子化 CSS 框架，快速完成样式开发
- Grid / Flex -- 两种互补的 CSS 布局方案
- Swiper -- 轮播组件的封装与复用
- vite-plugin-vue-markdown -- Markdown 内容渲染
- TypeScript -- interface 类型约束
↑