第 5 课 用 Vite 组织课件项目：页面、组件与素材管理
本课定位
从“一次性的小文件”升级到“可持续积累的课件工程”，让老师以后每学期都能复用和扩展。
本课技术框架
- Vite
- 项目目录结构
- 组件复用
- 静态资源管理
学习目标
- 理解课件项目为什么要分页面、组件、素材和配置
- 学会建立自己的课件目录规则
- 把第 4 课的小课件升级为可迭代项目
课前准备
- 准备第 4 课的小课件
- 准备本学科常用素材文件夹
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 讲师对比“散乱单文件”与“可维护项目结构” | 讲师对比“散乱单文件”与“可维护项目结构” |
| 10-25 分钟 | 讲解 pages、components、assets、data、teacher-notes 的组织方式 | 讲解 pages、components、assets、data、teacher-notes 的组织方式 |
| 25-40 分钟 | 用 Codex 重构第 4 课项目目录 | 用 Codex 重构第 4 课项目目录 |
| 40-55 分钟 | 学员为自己的课件项目建立命名规范和素材规则 | 学员为自己的课件项目建立命名规范和素材规则 |
| 55-60 分钟 | 记录个人项目模板 | 记录个人项目模板 |
核心讲授点
- 项目结构越早规范，后面复用越轻松
- 课件项目和普通教学资料一样，也需要命名规范和版本管理
- 老师不需要一次学完工程化，但要先建立“页面 / 组件 / 素材”三层概念
课堂案例
把数学函数课件整理成可复用项目
把图像演示、习题卡片和教师备注区拆成不同目录，让老师感受到长期维护的必要性。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“用 Vite 组织课件项目：页面、组件与素材管理”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 项目主题：八年级数学“二次函数图像实验室”
- 现有页面：封面页、参数拖拽页、课堂提问页、总结页
- 现有素材：函数题目 1 份、课堂问题 6 条、背景插图 2 张
- 现有问题：所有代码都写在一个 HTML 文件里，后续很难替换题目和样式
- 本次要做的课件：Vite 项目目录结构、文件命名规则和 README 运行说明
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的 Vite 网页课件项目
- 至少包含这些文件：index.html、src/main.js、src/style.css提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 项目主题：八年级数学“二次函数图像实验室”
- 现有页面：封面页、参数拖拽页、课堂提问页、总结页
- 现有素材：函数题目 1 份、课堂问题 6 条、背景插图 2 张
- 现有问题：所有代码都写在一个 HTML 文件里，后续很难替换题目和样式
- 本次要做的课件：Vite 项目目录结构、文件命名规则和 README 运行说明
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的 Vite 网页课件项目
- 至少包含这些文件：index.html、src/main.js、src/style.css提示词 3：整理成可长期复用项目
text
请把这个课件整理成适合长期复用和后续换课题的项目结构，让老师以后替换素材、题目和页面更方便。
请直接把课件做出来。
这次课件的要求如下：
- 项目主题：八年级数学“二次函数图像实验室”
- 现有页面：封面页、参数拖拽页、课堂提问页、总结页
- 现有素材：函数题目 1 份、课堂问题 6 条、背景插图 2 张
- 现有问题：所有代码都写在一个 HTML 文件里，后续很难替换题目和样式
- 本次要做的课件：Vite 项目目录结构、文件命名规则和 README 运行说明
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的 Vite 网页课件项目
- 至少包含这些文件：index.html、src/main.js、src/style.css本课交付物
- 一套《教师课件项目目录模板》
创意扩展
- 建立按学期、按单元、按课题的目录策略
- 给项目加一个“素材待补”清单页面