登录
【AI 编程实战】第 12 篇：从 0 到 1 的回顾 - 项目总结与 AI 协作心得
2026年2月27日 13:25
12 篇文章、一个完整的小程序、从需求分析到性能优化，这是我和 AI 协作开发心动恋聊的全过程。这篇文章作为系列收官，分享项目的完整回顾、AI 协作的心得体会、以及对未来开发模式的思考。
系列专栏：【AI 编程实战】专栏目录
本篇主题：项目总结与 AI 协作心得
实战项目：心动恋聊 - AI 恋爱聊天助手
一、项目回顾：从 0 到 1 的历程
1.1 项目概览
心动恋聊是一个 AI 恋爱聊天助手小程序，帮助用户在社交场景中获得更好的聊天回复建议。
📊 项目规模：
技术栈：
- 前端：UniApp + Vue 3 + TypeScript + Pinia
- 后端：Next.js + Prisma + AI API
- UI：UnoCSS + UView Pro
代码量：
- 前端代码：~15,000 行
- 组件数量：30+ 个
- 页面数量：15+ 个
- Hooks：10+ 个
开发周期：
- 总耗时：约 4 周
- 迭代次数：3 个大版本
1.2 系列文章脉络
📚 12 篇文章的完整脉络：
【基础搭建】（第 1-5 篇）
├── 第 1 篇：项目启动 - 需求分析、技术选型、AI 配置
├── 第 2 篇：创建项目 - UniApp 项目初始化与配置
├── 第 3 篇：页面结构 - 首页布局与 TabBar 配置
├── 第 4 篇：样式系统 - UnoCSS 原子化 CSS 实战
└── 第 5 篇：状态管理 - Pinia 持久化与用户状态
【核心功能】（第 6-9 篇）
├── 第 6 篇：网络请求 - HTTP 封装与拦截器设计
├── 第 7 篇：登录流程 - 微信授权与多步骤弹窗
├── 第 8 篇：组件封装 - 可复用组件设计方法
└── 第 9 篇：Hooks 封装 - 逻辑复用的最佳实践
【质量保障】（第 10-12 篇）
├── 第 10 篇：错误处理 - 防御性编程与边界情况
├── 第 11 篇：性能优化 - 分包、懒加载、缓存策略
└── 第 12 篇：项目总结 - 回顾与 AI 协作心得（本篇）
1.3 每篇文章的核心产出
| 篇章 | 主题 | 核心产出 |
|---|---|---|
| 第 1 篇 | 项目启动 | 需求文档、技术架构图 |
| 第 2 篇 | 创建项目 | 项目脚手架、目录结构 |
| 第 3 篇 | 页面结构 | 首页布局、TabBar 配置 |
| 第 4 篇 | 样式系统 | UnoCSS 配置、主题色方案 |
| 第 5 篇 | 状态管理 | userStore、持久化方案 |
| 第 6 篇 | 网络请求 | HTTP 封装、拦截器 |
| 第 7 篇 | 登录流程 | LoginModal、多步骤流程 |
| 第 8 篇 | 组件封装 | XButton、Modal、VipCard |
| 第 9 篇 | Hooks | useRequest、useUpload |
| 第 10 篇 | 错误处理 | Toast 封装、防御性编程 |
| 第 11 篇 | 性能优化 | 分包、懒加载、缓存 |
| 第 12 篇 | 项目总结 | 方法论、心得体会 |
二、AI 协作的正确姿势
2.1 什么样的对话最有效
通过 12 篇文章的实践，我总结出和 AI 对话的几个关键点：
❌ 低效的对话方式：
我：帮我写一个登录功能
这样的提问太宽泛，AI 不知道：
- 是什么平台？小程序/H5/App？
- 用什么登录方式？微信/手机号/密码？
- 登录后跳哪里？需要什么回调？
- UI 是弹窗还是页面？
✅ 高效的对话方式：
我：需要设计一套登录系统，要求：
1. 微信小程序环境
2. 支持微信登录 + 手机号授权
3. 新用户要引导填性别和年龄
4. 任意页面都能触发登录弹窗
5. 登录成功后能执行回调
这样 AI 能给出精准的方案，因为：
- 明确了环境（小程序）
- 明确了功能（微信登录 + 手机号）
- 明确了流程（新用户引导）
- 明确了交互（弹窗 + 回调）
2.2 对话的层次感
我发现最有效的对话是分层推进的：
第一轮：说清楚要做什么
我：需要封装一个通用的请求 Hook
第二轮：AI 询问细节，我补充
AI：需要支持哪些功能？immediate？初始数据？
我：需要立即执行选项，需要初始数据
第三轮：AI 给出设计，我确认
AI：我来设计接口结构...
我：开始吧
第四轮：AI 生成代码，我追问
AI：（生成代码）
我：为什么用 Promise 链式而不是 try-catch？
第五轮：AI 解释原理，我学到了
AI：两种写法对比...
这种层层递进的对话，比一次性给出"完美 Prompt"更有效，因为：
- 渐进明确：需求是在对话中逐步清晰的
- 双向确认：AI 的设计决策需要你确认
- 深度学习：追问"为什么"让你真正理解
2.3 AI 不是银弹
在实践中，我也发现了 AI 的局限：
📊 AI 擅长的事：
✅ 生成样板代码（CRUD、配置）
✅ 解释技术概念
✅ 分析代码问题
✅ 提供多种方案对比
✅ 重构和优化建议
📊 AI 不擅长的事：
❌ 理解业务上下文（需要你提供）
❌ 做产品决策（需要你判断）
❌ 处理边界情况（需要你验证）
❌ 了解项目历史（需要你说明）
核心认知：AI 是工具，不是替代品。你需要：
- 清晰地描述需求
- 评估 AI 给出的方案
- 验证生成的代码
- 理解背后的原理
三、效率提升的真实数据
3.1 开发效率对比
📊 单项任务耗时对比：
| 任务 | 传统方式 | AI 辅助 | 提升倍数 |
|------|---------|---------|----------|
| HTTP 封装 | 4 小时 | 1 小时 | 4x |
| 登录弹窗 | 8 小时 | 3 小时 | 2.7x |
| 组件封装 | 6 小时 | 2 小时 | 3x |
| Hooks 设计 | 4 小时 | 1.5 小时 | 2.7x |
| 错误处理 | 3 小时 | 1 小时 | 3x |
| 性能优化 | 6 小时 | 2 小时 | 3x |
3.2 效率提升的来源
📊 效率提升分析：
1. 减少"从零开始"的时间
- 传统：Google 搜索 → 看文档 → 试错
- AI：描述需求 → 获得可用代码 → 微调
2. 减少"踩坑"的时间
- 传统：遇到问题 → Stack Overflow → 找答案
- AI：描述问题 → 获得解决方案 → 理解原因
3. 减少"重复劳动"
- 传统：复制粘贴 → 手动修改
- AI：描述模式 → 批量生成
4. 加速"学习理解"
- 传统：看源码 → 猜测用法
- AI：问"为什么" → 获得解释
3.3 质量提升的体现
📊 代码质量对比：
【代码规范性】
- 一致的命名风格
- 完整的类型定义
- 合理的代码注释
【架构合理性】
- 清晰的分层设计
- 合理的职责划分
- 可扩展的接口设计
【可维护性】
- 抽象复用的组件
- 封装良好的 Hooks
- 统一的错误处理
四、最佳实践总结
4.1 项目结构最佳实践
📂 推荐的项目结构：
src/
├── api/ # API 接口定义
│ ├── user.ts
│ └── chat.ts
├── components/ # 通用组件
│ ├── XButton.vue
│ ├── Modal.vue
│ └── LoadingIndicator.vue
├── composables/ # 组合式函数
│ ├── useLoginFlow.ts
│ └── useSystemInfo.ts
├── hooks/ # 通用 Hooks
│ ├── useRequest.ts
│ └── useUpload.ts
├── http/ # HTTP 封装
│ ├── http.ts
│ ├── interceptor.ts
│ └── types.ts
├── pages/ # 页面
│ ├── index/
│ └── my/
├── store/ # 状态管理
│ ├── user.ts
│ └── loginModal.ts
├── subPackages/ # 分包
│ ├── vip/
│ └── agreement/
└── utils/ # 工具函数
├── toast.ts
└── platform.ts
4.2 代码规范最佳实践
// ✅ 推荐的代码风格
// 1. 类型定义清晰
interface Props {
text?: string;
loading?: boolean;
disabled?: boolean;
}
// 2. 默认值合理
const props = withDefaults(defineProps<Props>(), {
text: '',
loading: false,
disabled: false,
});
// 3. 事件定义明确
const emit = defineEmits<{
click: [];
success: [data: any];
error: [error: Error];
}>();
// 4. 计算属性缓存
const formattedData = computed(() =>
rawData.value.map(item => ({
...item,
displayName: formatName(item.name),
}))
);
// 5. 错误处理完整
const handleSubmit = async () => {
if (loading.value) return;
loading.value = true;
try {
const res = await doSubmit();
emit('success', res.data);
} catch (error) {
console.error('提交失败:', error);
toast.error('提交失败，请重试');
} finally {
loading.value = false;
}
};
4.3 AI 协作最佳实践
📋 AI 协作清单：
【开始前】
□ 明确功能需求
□ 了解技术约束
□ 准备上下文信息
【对话中】
□ 分层描述需求
□ 确认设计方案
□ 追问实现原理
□ 要求代码解释
【生成后】
□ 阅读理解代码
□ 验证功能正确
□ 检查边界情况
□ 优化代码细节
五、踩过的坑与解决方案
5.1 常见问题汇总
📊 开发中遇到的典型问题：
1. Token 获取位置
❌ 从 Store 获取（拦截器执行时 Store 未初始化）
✅ 从 Storage 获取
2. 响应式数据依赖
❌ 静态对象引用 store 数据
✅ 使用 computed 保持响应式
3. 枚举类型存储
❌ 字符串存储（'男'/'女'）
✅ 数字枚举（1/2）
4. 条件编译位置
❌ 运行时判断平台
✅ 使用 #ifdef 编译时判断
5. 组件职责边界
❌ 组件内处理业务逻辑
✅ 组件只负责 UI，业务逻辑在 Store/Service
5.2 避坑指南
// 1. Token 获取
// ❌ 错误
const { token } = userStore.userInfo;
// ✅ 正确
const token = uni.getStorageSync('token');
// 2. 响应式依赖
// ❌ 错误
const menuItems = {
label: userStore.genderDisplay
};
// ✅ 正确
const menuItems = computed(() => ({
label: userStore.genderDisplay
}));
// 3. 平台判断
// ❌ 错误
if (process.env.UNI_PLATFORM === 'mp-weixin') {
// ...
}
// ✅ 正确
// #ifdef MP-WEIXIN
// 小程序专用代码
// #endif
六、对未来的思考
6.1 AI 辅助开发的趋势
📊 我的观察：
【现在】
- AI 生成代码片段
- 人工整合和调试
- 需要理解才能用
【未来可能】
- AI 理解整个项目上下文
- 自动化测试和修复
- 更智能的代码审查
【不变的是】
- 需求分析能力
- 架构设计能力
- 问题诊断能力
6.2 开发者的核心竞争力
📊 AI 时代的开发者能力：
1. 问题定义能力
- 把模糊需求转化为清晰描述
- 识别真正要解决的问题
2. 方案评估能力
- 评估 AI 给出的多种方案
- 选择最适合当前场景的
3. 架构设计能力
- 理解系统整体结构
- 做出合理的技术决策
4. 持续学习能力
- 通过 AI 加速学习新技术
- 保持技术敏感度
七、系列总结
7.1 本系列的价值
📚 这个系列想传达的：
1. AI 辅助开发是可行的
- 不是概念，是实践
- 有真实的效率提升
2. 对话比 Prompt 更重要
- 不是"写好 Prompt 就行"
- 而是"多轮对话逐步明确"
3. 理解比复制更重要
- 不是"复制代码就完了"
- 而是"理解原理才能用好"
4. 人的判断不可替代
- AI 是工具，不是替代
- 技术决策需要人来做
7.2 给读者的建议
📋 如果你想开始 AI 辅助开发：
1. 从小项目开始
- 不要一开始就用于生产项目
- 先在 Side Project 中积累经验
2. 保持学习心态
- 每次对话都是学习机会
- 追问"为什么"比"给我代码"更重要
3. 建立验证习惯
- AI 生成的代码要验证
- 边界情况要自己考虑
4. 积累对话模式
- 总结有效的对话方式
- 建立自己的"提问模板"
7.3 最后的话
心动恋聊从一个想法，到一个完整的小程序，
再到这 12 篇文章，是我和 AI 协作的一次深度实践。
我最大的感受是：
AI 没有让编程变得"不需要思考"，
反而让我更清晰地思考"该怎么做"。
因为你需要：
- 清晰地描述需求
- 评估多种方案
- 理解生成的代码
- 验证实际效果
这些，都需要思考。
希望这个系列对你有帮助。
如果有问题，欢迎评论区交流！
系列完结！
12 篇文章，完整记录了心动恋聊小程序从 0 到 1 的开发过程。
这不是教你"如何写 Prompt"，而是展示如何和 AI 协作解决实际问题。
如果这个系列对你有帮助，请点赞、收藏、转发！
