第 6 课 用 Vite 组织课件项目：多页面、素材和组件怎么放逐页 PPT 正文

第 1 页 封面

• 标题：第 6 课 用 Vite 组织课件项目：多页面、素材和组件怎么放
• 副标题：让老师从单页课件进到项目级组织，避免文件越来越乱。

第 2 页 本课为什么重要

当老师开始做第二份、第三份课件时，目录和素材管理就会成为真实问题。这节课就是专门处理这个问题。

第 3 页 今天要带走什么

• 知道什么时候该从单页进入项目模式
• 会把页面、图片、音频和组件分开放
• 能看懂一个最小 Vite 课件项目

第 4 页 先看一个真实情境

最小 Vite 课件目录

src/
  pages/
  components/
  assets/
  data/
public/
  audio/
  image/

第 5 页 这类任务最容易在哪儿失手

Vite 的价值不在于技术感，而在于项目会更稳、更容易复用。

• 页面、素材、组件分开以后，老师后面修改某一页不会牵连全部内容。

第 6 页 讲师示范模板

帮我把这份单页课件整理成一个项目

我已经有一个单页网页课件了，现在我准备把它做成 4 页：
1. 导入页
2. 互动页
3. 练习页
4. 总结页

请你直接帮我整理成一个适合老师长期使用的 Vite 项目结构。我要的不是复杂工程方案，而是：
1. 文件夹怎么分
2. 每一页文件放哪
3. 图片、音频、题目数据放哪
4. 我后面想继续加新页面时该怎么接进去

第 7 页 学员跟做模板

直接把我的课件改成多页结构

请把我的网页课件整理成一个多页项目。

要求：
1. 用 Vite 组织
2. 至少包含首页、互动页、总结页
3. 把通用页眉和按钮样式抽出来，方便后面继续复用
4. 页面风格适合课堂投屏，不要做成网页海报

请直接把项目文件结构和完整代码给出来。

第 8 页 本课产出

• 一套《教师课件项目目录模板》

第 9 页 课后任务

• 把自己的课件从单页整理成最小项目结构。
• 下节课准备 1 组你最想复用的互动组件需求。