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

本课定位

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

学习目标

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

阅读方式

建议按下面的“60 分钟顺序”往下阅读。每个时间段里，都已经把本段任务、参考资料、可直接使用的模板和阶段成果编排在一起，方便老师顺着一节课的节奏阅读，不必在不同板块之间来回查找。

学习目标拆开来看

知道什么时候该从单页进入项目模式

这一项目标放在本课里，主要是帮助老师把“知道什么时候该从单页进入项目模式”这件事落到真实课堂和真实页面里，而不是只停留在概念上。读这一课的时候，重点不是把这句话记住，而是顺着后面的 60 分钟节奏去看：这一项能力会在什么时间点出现，最后会沉淀成什么课堂成果。

放到创意课件这条产品线里，它对应的不是单纯会不会做页面，而是老师能不能把课堂目标、页面动作和学生体验真正接起来。只要这一层想清楚，后面的资料、模板和实操就会顺很多。

会把页面、图片、音频和组件分开放

这一项目标放在本课里，主要是帮助老师把“会把页面、图片、音频和组件分开放”这件事落到真实课堂和真实页面里，而不是只停留在概念上。读这一课的时候，重点不是把这句话记住，而是顺着后面的 60 分钟节奏去看：这一项能力会在什么时间点出现，最后会沉淀成什么课堂成果。

放到创意课件这条产品线里，它对应的不是单纯会不会做页面，而是老师能不能把课堂目标、页面动作和学生体验真正接起来。只要这一层想清楚，后面的资料、模板和实操就会顺很多。

能看懂一个最小 Vite 课件项目

这一项目标放在本课里，主要是帮助老师把“能看懂一个最小 Vite 课件项目”这件事落到真实课堂和真实页面里，而不是只停留在概念上。读这一课的时候，重点不是把这句话记住，而是顺着后面的 60 分钟节奏去看：这一项能力会在什么时间点出现，最后会沉淀成什么课堂成果。

放到创意课件这条产品线里，它对应的不是单纯会不会做页面，而是老师能不能把课堂目标、页面动作和学生体验真正接起来。只要这一层想清楚，后面的资料、模板和实操就会顺很多。

课前准备

• 准备上一节做出的第一份网页课件
• 列出这门课接下来还会做的 3 页内容
• 找出自己最常用的 3 类素材

按 60 分钟顺序展开

0-10 分钟

本段任务

用《最小 Vite 课件目录》开场，让老师先进入 用 Vite 组织课件项目：多页面、素材和组件怎么放 这个具体教学场景。

本段重点

• 关联目标：知道什么时候该从单页进入项目模式
• 关键提醒：Vite 的价值不在于技术感，而在于项目会更稳、更容易复用。

教学意图

开头先把课堂情境和真实需求立住。只要老师先看见“这和我的课堂有什么关系”，后面的页面和技术动作就不会显得漂浮。

本段参考资料

最小 Vite 课件目录

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

先把这份资料读一遍，先看清楚场景、对象和任务，再进入后面的整理和修改。读的时候重点留意：哪些信息必须保留，哪些地方还需要老师自己补判断。

阶段成果

• 老师已经能说清楚：这节课真正要解决的课堂问题是什么。

10-20 分钟

本段任务

把本课最关键的判断线讲清楚，先帮助老师看见这一类课件最容易做偏在哪里。

本段重点

• 关联目标：会把页面、图片、音频和组件分开放
• 关键提醒：页面、素材、组件分开以后，老师后面修改某一页不会牵连全部内容。

教学意图

这一段的重点不是堆知识点，而是把“该先抓哪一条主线”讲清楚。只有先把判断线立起来，后面的执行模板和页面实现才更容易稳住。

本段参考资料

老师常见文件混乱场景

1. 所有图片都放在桌面
2. 复制很多版 index-final-final2.html
3. 音频、图片、页面混在一起
4. 下次再改时自己也找不到素材

先把这份资料读一遍，先看清楚场景、对象和任务，再进入后面的整理和修改。读的时候重点留意：哪些信息必须保留，哪些地方还需要老师自己补判断。

阶段成果

• 老师已经知道：这类课件最值得先抓住的主线和最容易失手的地方。

20-35 分钟

本段任务

讲师现场示范一轮，把老师最关心的这一页或这一组页面先做出来。

本段重点

• 关联目标：能看懂一个最小 Vite 课件项目
• 关键提醒：一旦准备做多页课件，就应该尽早进入项目结构。

教学意图

示范段的意义是让老师看见第一版通常怎样开工、怎样收住，而不是看一个远离自己课堂的完美案例。

本段可直接使用的模板

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

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

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

正式使用前，先把年级、课题、页面要求和课堂动作换成自己的真实信息。第一版跑出来以后，先看课堂顺不顺，再看细节和风格。

阶段成果

• 老师已经完整看过一轮示范，知道第一版通常怎样跑起来。

35-50 分钟

本段任务

老师拿自己的课题或材料跟做一轮，先做出一版可继续修改的结果。

本段重点

• 关联目标：能看懂一个最小 Vite 课件项目
• 关键提醒：一旦准备做多页课件，就应该尽早进入项目结构。

教学意图

真正形成能力的关键，往往就在这一段。先做出第一版，再回头调整页面、素材和老师说法，通常比一开始就求全更稳。

本段可直接使用的模板

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

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

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

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

正式使用前，先把年级、课题、页面要求和课堂动作换成自己的真实信息。第一版跑出来以后，先看课堂顺不顺，再看细节和风格。

阶段成果

• 老师已经拿自己的材料做出一版结果，并知道接下来优先改哪里。

50-60 分钟

本段任务

快速点评、收束方法，并把本课成果收成 一套《教师课件项目目录模板》。

本段重点

• 关联目标：能看懂一个最小 Vite 课件项目
• 关键提醒：一旦准备做多页课件，就应该尽早进入项目结构。

教学意图

最后这一段不再加新东西，而是把今天的方法收回到老师自己的工作里，知道哪些成果值得带走、哪些地方下次还要继续打磨。

阶段成果

• 老师已经带走本课产出：一套《教师课件项目目录模板》

关键讲授点

讲授点 1

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

这一个讲授点在课堂里最好先讲“为什么重要”，再讲“老师最容易在哪一步失手”，最后再回到今天的页面、材料和课堂动作里。只要这三层能对上，老师通常会更容易把这一节真正带回自己的课。

讲授点 2

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

这一个讲授点在课堂里最好先讲“为什么重要”，再讲“老师最容易在哪一步失手”，最后再回到今天的页面、材料和课堂动作里。只要这三层能对上，老师通常会更容易把这一节真正带回自己的课。

讲授点 3

一旦准备做多页课件，就应该尽早进入项目结构。

这一个讲授点在课堂里最好先讲“为什么重要”，再讲“老师最容易在哪一步失手”，最后再回到今天的页面、材料和课堂动作里。只要这三层能对上，老师通常会更容易把这一节真正带回自己的课。

本课最容易踩的坑

最常见的误区

这类任务最常见的问题，不是完全不会做，而是容易一上来就做太满、做太散，或者把应该由老师自己最后判断的部分也一起丢掉了。用 Vite 组织课件项目：多页面、素材和组件怎么放 这一课的关键，就是把这条界线和处理顺序重新拉清楚。

更稳妥的做法

• 先从自己最熟的一页或一个场景开始，不要一上来就做完整大项目。
• 先把第一版跑出来，再逐项检查课堂节奏、知识点准确度和页面可用性。
• 如果需要升级技术，先确认课堂价值和设备条件，再决定要不要继续往上加。

本课产出

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

课后任务

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

自学阅读顺序

• 先顺着 60 分钟顺序快速读一遍，先建立本课节奏感。
• 第二遍回看本课两段可直接使用的模板，把其中的年级、课题、页面要求换成自己的真实内容。
• 最后只保住一个最值得先做的页面或一个最小版本，先把它跑通。

讲师提醒

• 这节课的重点是项目组织，不是把 Vite 讲成前端框架课。
• 多用“以后你找文件会不会轻松”这种老师语言来讲。

下一课衔接

下一课会继续推进到 第 7 课 课堂节奏页怎么做：切页、动画、计时器和老师的停顿点，把今天形成的结果往下一步课程里接起来。