第11课：多文件协作开发
进度 0/12
🗂️
多文件协作开发
让AI管理整个项目——多文件协作与跨文件编辑
📖知识引入
📦多文件项目
真实软件不是一个文件能搞定的：HTML、CSS、JS分开；JS又分主逻辑、数据、工具函数。多文件让代码清晰、好维护。Qoder的文件树帮你管理整个项目结构。
@@引用文件
在AI对话里打@会弹出文件列表，@script.js 让AI先读这个文件再讨论。AI能跨文件理解上下文：「修改@index.html和@script.js让按钮变大」——一次说清两个文件。
🏗️多文件协作模式
做大项目时切到协作模式，AI会自主规划：分析需求→决定改哪些文件→按顺序执行→运行验证→自我修复。你说「做一个博客系统」，它能自己创建十几个文件。
🔄跨文件重构
把 greet 改成 sayHello？手动改要找遍所有文件。Qoder右键「Rename Symbol」一键改所有引用。重构函数、提取公共逻辑、改文件名——AI帮你搞定跨文件改动。
🌳文件树管理
项目复杂后要分文件夹：components放组件、utils放工具、assets放图片。在文件树拖拽即可移动，Qoder自动更新所有引用路径，不用手动改一晚上。
💡
多文件协作模式让AI当项目经理——你说需求，它规划多文件协作执行！
🔍多文件项目实战
// 多文件项目示例：store.js
let notes = JSON.parse(localStorage.getItem("notes") || "[]");
export function getNotes() { return notes; }
export function save() {
localStorage.setItem("notes", JSON.stringify(notes));
}
// main.js 引用 store.js
import { getNotes, save } from "./store.js";
import { render } from "./render.js";
function add(title, body) {
getNotes().push({ id: Date.now(), title, body });
save(); render();
}看一个笔记App如何拆分多文件：
原始结构（单文件）： app.js（500行混在一起）
重构后（多文件）：
project/
├─ index.html
├─ style.css
├─ js/
│ ├─ main.js （入口）
│ ├─ store.js （数据存取）
│ ├─ render.js （渲染逻辑）
│ └─ utils.js （工具函数）
└─ assets/
└─ icons/操作演示：
操作1 跨文件改需求 你：@store.js @render.js 把保存逻辑改成异步的， 渲染时加loading状态。 AI：读懂两个文件， 修改store的save为async， render里加loading分支。
操作2 多文件协作做大项目
切协作模式，输入：
「做一个博客系统：
文章列表、详情、关于三个页面，
共用顶部导航和底部。」
AI自主规划：
1.创建index.html等3个页面
2.创建components/header.html
3.创建components/footer.html
4.三个页面引用公共组件
5.加style.css统一美化操作3 重命名函数
右键 greet→Rename Symbol
改成 sayHello
所有文件里的greet自动改
不用一个个找！
操作4 拖拽移动文件 把components/header.html 拖到shared/文件夹 所有引用路径自动更新
这就是项目级AI编程： 你指挥，AI管理整个代码库。
🎯小测验
第1题：在AI对话里 @文件名 的作用是？
第2题：多文件协作模式最适合做什么？
第3题：把函数 greet 改名 sayHello，最佳做法是？
📝本课知识点
- ✓真实软件是多文件的，结构要清晰
- ✓@引用让AI跨文件理解上下文
- ✓多文件协作模式做完整多文件项目
- ✓Rename Symbol跨文件重命名
- ✓文件树拖拽移动，引用自动更新
第11课完成！继续探索下一课吧 🚀