一个文件越来越长
AI 一开始很喜欢把 HTML、CSS、JS 全写在一个页面里。
后果：功能多了以后，找一段逻辑要翻很久，改一个按钮可能影响整个页面。
让 AI 写出来的项目还能继续维护
工程化是什么？
工程化，就是把“能跑的代码”整理成“能长期维护的项目”。它会规定目录怎么放、功能怎么拆、接口怎么写、代码怎么保存、上线怎么验收。
对 AI 写代码尤其重要：AI 很擅长快速生成一个页面，但如果你一直让它往同一个文件里加功能，项目很快会变成一团难以维护的代码。
拆模块 定规范 方便 AI 和人一起维护
先记住这一句
工程化的核心是拆。把页面、组件、接口、数据库、配置分开放。
工程化的目标是可持续。今天能做，明天还能改，下个月还能上线。
工程化也在帮 AI。结构清楚，AI 才更容易读懂上下文、少改错文件。
STEP 01
为什么 AI 单页面代码会越来越难维护？
不是 AI 不行，而是没有工程边界，代码会自然变乱。
功能互相缠在一起
登录、列表、支付、上传、弹窗都混在同一段代码里。
后果：AI 后面再改功能时容易误删、误改，人工也很难判断哪里能动。
命名和写法不统一
今天叫 userList，明天叫 users，后天又叫 data。
后果：AI 读上下文会混乱，人看代码也会迷路，协作和排错成本越来越高。
重复代码到处都是
同样的按钮、表单校验、接口请求复制了很多份。
后果：改一次样式要改十个地方，漏改一个就出现奇怪的不一致。
性能越来越差
所有脚本和数据都一次性加载，页面里塞满不必要的逻辑。
后果：打开慢、交互卡、移动端更明显，后面再优化会很痛苦。
上线和回退没有章法
只会把代码复制到服务器，改坏了也不知道上一个可用版本在哪。
后果：线上出问题时只能慌着修，越修越乱，甚至把原本能跑的功能弄坏。
STEP 02
工程化到底在工程化什么？
你可以先把它理解成三层：前端、后端、整个项目。
前端工程化
把页面拆成可维护的界面系统
前端不只是写 HTML/CSS。真实项目里，要把页面拆成按钮、表单、列表、弹窗、导航等组件，让每块界面都能复用、能单独修改。
组件拆分路由页面状态管理样式规范构建打包
后端工程化
把业务逻辑拆成稳定的服务
后端负责接收前端请求，判断能不能做、该怎么做、数据存哪里。工程化后，登录、上传、课程、订单这些能力会被拆到不同模块。
接口路由参数校验权限控制数据库访问错误处理
项目工程化
让整个项目能长期迭代
工程化不是某一个技术点，而是一套让项目能持续开发、测试、上线、回滚的规则。项目越大，这套规则越重要。
目录结构环境配置Git 版本代码规范部署流程
STEP 03
工程化能解决哪些问题？
它不是为了显得专业，而是为了少踩坑、少返工。
engineering checklist
从“乱写”变成“可维护”的 8 个动作
1
拆页面
页面只负责组织结构，不把所有逻辑都塞进去。
2
拆组件
按钮、卡片、表单、弹窗等常用界面单独封装。
3
拆接口
前端请求统一放到 api 文件，别在页面里到处写 fetch。
4
拆后端模块
用户、课程、项目、上传分别放到自己的 controller/service/repository。
5
定目录规则
文件放哪里、怎么命名、怎么导入，要有固定约定。
6
定数据结构
请求参数、返回结果、数据库字段要清楚，不要随手变。
7
加校验和错误处理
用户传错数据时要能拦住，并返回看得懂的提示。
8
用 Git 保存节点
每完成一个小功能就提交，改坏了可以对比和回退。
工程化之后，AI 和人都会轻松很多
AI 能更准确地知道“这个功能应该改哪个文件”；人也能更快看懂“这个项目哪里是页面、哪里是接口、哪里是数据”。项目越复杂，工程化的收益越明显。
STEP 04
一个工程化项目长什么样？
不是文件越多越高级，而是每类代码都有自己的位置和职责。
project structure
project/ 项目根目录
├─ src/pages/ 页面入口
├─ src/components/ 复用组件
├─ src/lib/ 工具函数和请求封装
├─ server/modules/ 后端业务模块
├─ prisma/schema.prisma 数据库模型
├─ .env 环境变量
└─ package.json 启动和构建命令
pages
页面入口
每个页面只负责组织布局和调用组件，例如首页、登录页、课程详情页。
components
复用组件
按钮、表单、卡片、导航、弹窗单独放，多个页面都能复用。
api / services
接口请求
统一管理和后端通信的代码，页面里不用到处写 fetch 或 axios。
server modules
后端模块
用户、课程、项目、上传分别拆成路由、控制器、服务和数据库访问。
database
数据模型
表结构、字段、关系、迁移文件集中管理，避免数据越存越乱。
config / scripts
配置和脚本
环境变量、启动命令、构建命令、部署脚本放在固定位置，方便上线和排错。
判断项目是否工程化，看这句话就够了
当你想改一个功能时，能不能很快知道应该改哪个页面、哪个组件、哪个接口、哪个数据库字段。如果答案是“要全局搜索、到处猜”，说明项目已经开始失控。
一句话结论
用 AI 写代码，不要只追求“马上生成出来”。真正能做成项目的人，会让 AI 按工程化方式拆页面、拆组件、拆接口、拆后端模块，并用 Git 保存每一步。这样代码才不会越写越乱，后面也更容易上线和维护。