AI 编程基础

标准工作流

1. 需求分析 → 梳理"要做什么"
2. 技术选型 → 确定用什么工具栈
3. 项目初始化 → 搭骨架
4. 分步实现 → 一个功能一个功能地做
5. 联调测试 → 前后端对接 + 修 bug
6. 部署上线 → 发布到互联网
7. 迭代优化 → 根据反馈改进

第一阶段：需求分析

用 AI 帮你梳理需求

“我要做一个 xxx 项目，帮我拆解成具体的功能列表，按优先级排列”

AI 会给出：

核心功能（MVP）：必须要有的
扩展功能：后期可以加的

实例：做个待办应用

核心功能：
✅ 添加待办事项
✅ 标记完成/未完成
✅ 删除待办
✅ 数据持久化（localStorage / 数据库）

扩展功能：
📋 分类标签
🔍 搜索过滤
👤 多用户
📊 统计面板

第二阶段：技术选型

根据项目大小选择：

项目类型	推荐技术栈
单页 Demo	HTML + CSS + JS
小型应用	Vue 3 + Vite
中型全栈	Vue 3 + Supabase
大型项目	Vue 3 + Node.js + PostgreSQL

第三阶段：项目初始化

标准初始化命令

# 创建项目
npm create vite@latest project-name -- --template vue

# 进入目录
cd project-name

# 安装依赖
npm install

# 安装常用库
npm install vue-router @supabase/supabase-js

# 启动
npm run dev

第四阶段：分步实现

每个功能的实现流程

1. 告诉 AI 要做什么功能（用提示词模板）
2. AI 生成代码
3. 你预览效果
4. 不满意 → 提出修改意见 → 回到步骤 2
5. 满意 → 提交代码
6. 继续下一个功能

提交节奏

每完成一个功能，提交一次：

git add .
git commit -m "完成用户登录功能"

第五阶段：联调测试

测试清单

让 AI 帮你写边界情况

“帮我给这个表单加上：空值校验、邮箱格式校验、提交按钮的 loading 状态、提交失败的错误提示”

第六阶段：部署

参考上一篇《部署上线》，选择适合的平台。

第七阶段：迭代

上线后根据反馈继续改。每个迭代的流程：

收到反馈 → 分析需求 → 让 AI 实现 → 测试 → 部署

完整示例：一个功能的完整过程

以”添加搜索功能”为例：

你： "给文章列表加上搜索功能，按标题搜索，实时过滤"
AI： [生成代码，包括搜索框 + 过滤逻辑]
你： "搜索框太窄了，加宽一点，加一个搜索图标"
AI： [修改样式]
你： "搜索没结果时显示'未找到相关文章'"
AI： [添加空结果状态]
你： [测试通过] → git commit → git push → 自动部署

小结

记住这个流程，每个项目都按这个节奏来：

想清楚 → 2. 选工具 → 3. 搭架子 → 4. 逐个实现 → 5. 测试 → 6. 上线 → 7. 迭代

下一篇是整个系列的总结与后续学习建议。