【AI 编程实战】第 12 篇：从 0 到 1 的回顾 - 项目总结与 AI 协作心得

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"更有效，因为：

1. 渐进明确：需求是在对话中逐步清晰的
2. 双向确认：AI 的设计决策需要你确认
3. 深度学习：追问"为什么"让你真正理解

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 协作解决实际问题。

如果这个系列对你有帮助，请点赞、收藏、转发！