Vibe Coding指南 - 技术栈

Vibe Coding 指南

与 AI 协作的现代编程范式

什么是 Vibe Coding？

Vibe Coding 是一种全新的编程范式，它改变了我们与代码交互的方式。

传统编程 vs Vibe Coding

维度	传统编程	Vibe Coding
工作方式	手写每一行代码	描述意图，AI 生成代码
关注点	如何实现（How）	要实现什么（What）
开发流程	编码 → 调试 → 优化	描述 → 审查 → 迭代
技能要求	精通语法和 API	清晰表达 + 代码审查
效率提升	线性增长	指数级增长

核心价值

Vibe Coding 不是让 AI 替你写代码，而是让 AI 成为你的编程伙伴：

你负责：架构设计、业务逻辑、质量把控
AI 负责：代码生成、重复劳动、方案探索
共同完成：快速迭代、持续优化、创造价值

核心理念

1. Think in Outcomes, Not Implementation

关注结果，而非实现细节

ini 复制代码

❌ 传统思维：
"帮我写一个 for 循环，遍历 users 数组，判断 status === 'active'，
然后 push 到新数组，最后 map 提取 name 和 email"

✅ Vibe Coding 思维：
"从 users 中筛选出所有活跃用户，返回他们的姓名和邮箱"

为什么这样更好？

AI 可能使用更优雅的 filter + map 组合
AI 可能考虑到性能优化（如使用 reduce 一次遍历）
AI 可能添加类型安全和错误处理

2. Iterate, Don't Perfect

快速迭代，而非追求一次完美

arduino 复制代码

第1轮：实现基础功能（能用）
  "实现用户登录功能，支持手机号+验证码"

第2轮：优化用户体验（好用）
  "添加验证码倒计时、输入框自动聚焦、错误提示"

第3轮：性能优化（快用）
  "优化登录接口调用，添加请求缓存和防抖"

第4轮：完善细节（爱用）
  "添加登录动画、记住登录状态、支持生物识别"

3. Context is King

上下文决定代码质量

AI 需要了解你的"世界观"：

技术栈：Vue 3 + TypeScript + Pinia
项目结构：页面、组件、API、Store 的组织方式
编码规范：命名规则、代码风格、注释要求
业务逻辑：用户角色、权限系统、业务流程

提供上下文的方式：

使用 @文件名 引用相关文件
在 .cursorrules 中定义项目规范
在提示词中说明技术约束
提供参考示例或类似功能

完美提示词的六大要素

1. 明确的目标 (What)

说清楚要做什么

arduino 复制代码

✅ 好的目标：
"实现用户登录功能，支持手机号+验证码和账号+密码两种方式"

❌ 模糊的目标：
"做个登录"

2. 清晰的上下文 (Where & Why)

说明在哪里做，为什么做

perl 复制代码

✅ 好的上下文：
"在 @src/pages/login/index.vue 中实现，
因为现有的登录只支持账号密码，
产品要求增加验证码登录方式以提升用户体验"

❌ 缺少上下文：
"加个验证码登录"

3. 技术约束 (How)

说明使用什么技术，如何实现

arduino 复制代码

✅ 好的技术约束：
"使用 Vue 3 Composition API + TypeScript，
调用 POST /api/v1/auth/login 接口，
验证码倒计时 60 秒，使用 uni.request 发送请求"

❌ 缺少技术约束：
"用 Vue 做"

4. 边界条件 (Constraints)

说明不能做什么，有什么限制

arduino 复制代码

✅ 好的边界条件：
"不要修改现有的账号密码登录逻辑，
验证码输入框只允许数字，
发送验证码前要校验手机号格式（11位数字），
同一手机号 60 秒内只能发送一次验证码"

❌ 没有边界条件：
（任何约束都没有提）

5. 预期结果 (Success Criteria)

说明完成后应该是什么样子

markdown 复制代码

✅ 好的预期结果：
"完成后应该能够：
1. 输入手机号，点击发送验证码
2. 60秒倒计时，期间按钮禁用显示剩余秒数
3. 输入6位数字验证码
4. 点击登录按钮，显示加载状态
5. 登录成功后保存 token 并跳转到首页
6. 登录失败显示错误提示"

❌ 没有验收标准：
（不知道怎么算完成）

6. 示例或参考 (Examples)

提供参考实现或设计稿

perl 复制代码

✅ 好的参考：
"参考 @src/pages/login/password.vue 的样式和布局，
验证码输入框类似支付宝的 6 位数字输入（每位一个框），
整体风格保持与现有登录页一致"

❌ 没有参考：
（AI 只能猜测你想要什么样式）

高级技巧

技巧 1：分层提示（Layer Prompting）

不要一次性要求所有细节，而是分层递进

第1层：架构层

diff 复制代码

"设计一个用户认证系统，包含以下功能：
- 登录（手机号+验证码、账号+密码）
- 注册（手机号+验证码）
- 找回密码
- 修改密码
请给出整体架构设计和文件组织结构"

第2层：功能层

diff 复制代码

"先实现登录功能，支持手机号+验证码和账号+密码两种方式，
包括：
- 登录页面 UI
- 表单验证
- API 调用
- Token 存储
- 路由跳转"

第3层：实现层

markdown 复制代码

"实现手机号+验证码登录，具体包括：
1. 手机号输入框（带格式校验）
2. 发送验证码按钮（带倒计时）
3. 验证码输入框（6位数字）
4. 登录按钮（带加载状态）
5. 错误提示"

第4层：细节层

diff 复制代码

"优化验证码输入体验：
- 自动聚焦到第一个输入框
- 输入一位后自动跳到下一位
- 支持粘贴6位验证码自动填充
- 输入完成后自动触发登录
- 支持删除时自动回到上一位"

技巧 2：对话式调试（Conversational Debugging）

把 AI 当作结对编程的伙伴

perl 复制代码

你："这个登录功能有问题，点击按钮没反应"

AI："让我检查一下... 发现 handleLogin 方法没有绑定到按钮的 @click 事件"

你："修复后还是不行，控制台报错 'token is undefined'"

AI："看起来 API 返回的数据结构不对，让我检查 @src/api/auth.ts...
    发现接口返回的是 data.access_token，但代码中用的是 data.token"

你："对，后端改了字段名，同步更新一下类型定义和 mock 数据"

AI："已更新 @src/types/auth.ts 中的 ILoginResponse 接口，
    同时更新了 @src/mock/data/auth.ts 中的 mock 数据"

技巧 3：模板化常见任务（Template Prompts）

为重复性任务创建提示词模板

模板 1：创建 CRUD 页面

diff 复制代码

创建 [资源名称] 的 CRUD 页面：

文件结构：
- 列表页：@src/pages/[资源]/list.vue
- 详情页：@src/pages/[资源]/detail.vue
- 编辑页：@src/pages/[资源]/edit.vue
- API：@src/api/[资源].ts
- 类型：@src/types/[资源].ts
- Store：@src/stores/use[资源]Store.ts

列表页功能：
- 搜索栏（[字段1]、[字段2]）
- 数据表格（[列1]、[列2]、操作列）
- 分页组件
- 新增按钮

详情页功能：
- 展示所有字段
- 编辑按钮
- 删除按钮

编辑页功能：
- 表单（所有可编辑字段）
- 表单验证
- 保存按钮
- 取消按钮

使用项目规范，参考 @src/pages/user 的实现

模板 2：创建业务组件

ini 复制代码

创建 [组件名称] 组件：

文件位置：@src/components/[组件名称]/index.vue

Props：
- [prop1] (类型): 描述
- [prop2] (类型): 描述

Emits：
- [event1]: 描述
- [event2]: 描述

功能：
1. [功能1描述]
2. [功能2描述]

样式要求：
- [样式要求1]
- [样式要求2]

参考：@src/components/[类似组件]

模板 3：API 接口对接

ini 复制代码

对接 [接口名称] 接口：

接口信息：
- 路径：[METHOD] /api/v1/[path]
- 描述：[接口功能描述]

请求参数：
- [param1] (类型, 必填/可选): 描述
- [param2] (类型, 必填/可选): 描述

返回数据：
- [field1] (类型): 描述
- [field2] (类型): 描述

需要：
1. 在 @src/api/[模块].ts 中添加接口方法
2. 在 @src/types/[模块].ts 中定义类型
3. 在 @src/mock/handlers.ts 中添加 mock
4. 在 [调用位置] 中调用接口

技巧 4：增量式重构（Incremental Refactoring）

不要一次性重构整个文件，而是逐步优化

perl 复制代码

第1步："提取 @src/pages/user/list.vue 中的搜索逻辑到 useSearch composable"
  ↓
第2步："将表格配置抽离到 @src/pages/user/config/tableConfig.ts"
  ↓
第3步："优化分页逻辑，使用 @src/composables/base/usePagination.ts"
  ↓
第4步："添加列表数据缓存，避免重复请求"
  ↓
第5步："添加骨架屏加载状态"

技巧 5：约束驱动开发（Constraint-Driven Development）

通过约束引导 AI 生成更好的代码

markdown 复制代码

实现用户列表功能，严格遵守以下约束：

代码质量约束：
1. 单个函数不超过 50 行
2. 单个文件不超过 300 行
3. 所有异步操作必须有错误处理
4. 使用 TypeScript 严格模式，不允许 any
5. 所有函数必须有 JSDoc 注释

架构约束：
1. 组件拆分：搜索栏、表格、分页各自独立
2. 逻辑抽离：使用 composable 管理状态
3. 类型定义：所有接口和数据结构必须定义类型
4. 错误处理：使用统一的 errorHandler

性能约束：
1. 支持 10000 条数据的虚拟滚动
2. 搜索防抖 300ms
3. 图片懒加载
4. 列表数据缓存 5 分钟

可访问性约束：
1. 支持键盘导航（Tab、Enter、Esc）
2. 支持屏幕阅读器
3. 颜色对比度符合 WCAG 2.1 AA 标准

技巧 6：元提示（Meta Prompting）

让 AI 帮你写提示词

diff 复制代码

"我想实现一个复杂的数据可视化功能，
但不知道如何描述清楚，
请帮我生成一个完整的提示词，
包含所有必要的信息和约束条件。

需求概述：
- 展示用户增长趋势图（折线图）
- 支持按日/周/月切换
- 支持数据导出
- 需要响应式设计

请生成一个结构化的提示词"

或者：

markdown 复制代码

"根据我的需求，生成一个分步骤的实现计划：

需求：实现一个支持多人协作的在线白板
技术栈：Vue 3 + TypeScript + WebSocket + Canvas

请给出：
1. 整体架构设计
2. 详细的实现步骤
3. 每一步的具体提示词
4. 需要注意的技术难点"

三种工作模式

模式 1：探索模式（Exploration Mode）

适用场景：不确定如何实现，需要探索方案

markdown 复制代码

"我想实现一个拖拽排序的功能，
但不确定用什么库比较好，
项目是 Vue 3 + TypeScript + uni-app，
需要支持移动端触摸拖拽，
请给我几个方案对比，包括：
1. 推荐的库（开源、维护活跃、支持 TypeScript）
2. 各方案的优缺点
3. 性能对比
4. 集成难度
5. 你的推荐和理由"

AI 的回应方式：

提供多个方案对比
分析每个方案的适用场景
给出具体的推荐和理由

模式 2：执行模式（Execution Mode）

适用场景：明确知道要做什么，快速实现

less 复制代码

"在 @src/components/DragList.vue 中使用 Sortable.js 实现拖拽排序：

1. 安装依赖：
   - sortablejs
   - @types/sortablejs

2. 创建 @src/composables/useDraggable.ts 封装拖拽逻辑

3. 功能要求：
   - 支持拖拽排序
   - 拖拽时显示占位符
   - 拖拽结束触发 @change 事件，返回新的排序
   - 支持禁用拖拽（通过 disabled prop）

4. 样式要求：
   - 拖拽中的元素半透明
   - 占位符显示虚线边框
   - 拖拽手柄显示拖拽图标

参考 @src/components/SortableTable.vue 的实现"

AI 的回应方式：

直接生成代码
按步骤实现功能
提供必要的说明

模式 3：优化模式（Optimization Mode）

适用场景：功能已实现，需要优化

markdown 复制代码

"优化 @src/components/DragList.vue 的性能和用户体验：

性能优化：
1. 分析当前性能瓶颈（使用 Vue DevTools）
2. 优化拖拽时的重渲染问题（使用 v-memo）
3. 添加虚拟滚动支持大列表（1000+ 项）
4. 优化事件监听（使用事件委托）

体验优化：
1. 优化移动端触摸体验（增大触摸区域）
2. 添加拖拽动画（使用 FLIP 技术）
3. 添加触觉反馈（移动端震动）
4. 改进无障碍支持（键盘操作）

监控：
1. 添加性能监控埋点
2. 记录拖拽操作日志
3. 监控错误和异常"

AI 的回应方式：

分析现有代码
指出优化点
提供优化方案
实施优化

常见陷阱与避坑指南

陷阱 1：过度依赖 AI

问题表现：

完全不看 AI 生成的代码，直接复制粘贴
不理解代码逻辑，出问题无法调试
代码风格不统一，不符合项目规范

正确做法：

复制代码

✅ 审查每一行代码
✅ 理解核心逻辑
✅ 验证类型定义
✅ 检查错误处理
✅ 确保符合项目规范
✅ 运行测试验证功能

陷阱 2：提示词过于模糊

问题表现：

arduino 复制代码

❌ "优化一下性能"
❌ "改好看一点"
❌ "修复一下 bug"

正确做法：

arduino 复制代码

✅ "优化列表渲染性能，目标：1000条数据渲染时间从 500ms 降到 100ms 以内"
✅ "按照 Figma 设计稿调整样式，主要是：间距、颜色、圆角、阴影"
✅ "修复登录按钮点击无反应的问题，控制台报错：'Cannot read property token of undefined'"

陷阱 3：忽略上下文

问题表现：

每次都从零开始描述
不引用相关文件
AI 不了解项目结构

正确做法：

swift 复制代码

✅ 使用 @文件名 引用相关文件
✅ 说明项目技术栈和规范
✅ 提供参考实现
✅ 说明业务背景

陷阱 4：一次性要求太多

问题表现：

arduino 复制代码

❌ "实现整个电商系统，包括：
   商品管理、订单管理、用户管理、
   支付系统、物流系统、营销系统、
   数据分析、客服系统..."

正确做法：

arduino 复制代码

✅ 第1步："先实现商品列表页，包括搜索、筛选、分页"
✅ 第2步："实现商品详情页，包括图片轮播、规格选择、加入购物车"
✅ 第3步："实现购物车功能，包括商品列表、数量修改、结算"
✅ ...逐步推进

陷阱 5：不验证结果

问题表现：

AI 说完成了就完成了
不运行代码测试
不检查类型错误
不测试边界情况

正确做法：

复制代码

✅ 运行代码，测试功能
✅ 检查 TypeScript 类型错误
✅ 测试边界情况（空数据、错误数据、极端数据）
✅ 检查性能（大数据量、慢网络）
✅ 测试兼容性（不同浏览器、不同设备）

陷阱 6：忽视代码质量

问题表现：

只关注功能实现，不关注代码质量
代码重复、结构混乱
没有注释、类型定义不完整

正确做法：

复制代码

✅ 要求 AI 遵守代码规范
✅ 要求添加注释和类型定义
✅ 要求代码模块化、可复用
✅ 要求添加错误处理
✅ 定期重构优化

黄金公式

完美提示词 = 7 个要素

css 复制代码

[角色设定] + [任务目标] + [上下文] + [技术栈] + [约束条件] + [预期结果] + [参考示例]

实战示例

markdown 复制代码

你是一个 Vue 3 + TypeScript 专家（角色设定），

帮我在 @src/pages/product/list.vue 中实现商品列表功能（任务目标），

这是一个电商小程序项目，需要展示商品列表并支持筛选，
商品数据来自后端 API，用户可以通过分类、价格、销量等条件筛选商品（上下文），

使用 Vue 3 Composition API + TypeScript + Pinia + uni-app，
调用 GET /api/v1/products 接口获取商品列表（技术栈），

要求：
1. 不修改现有的 TabBar 组件和路由配置
2. 支持下拉刷新和上拉加载更多
3. 筛选条件包括：分类、价格区间、销量排序
4. 单个组件不超过 300 行，复杂逻辑抽离到 composable
5. 所有类型必须明确定义，不使用 any
6. 图片使用懒加载
7. 列表数据缓存 5 分钟
（约束条件）

完成后应该能够：
1. 进入页面自动加载第一页数据（20条）
2. 下拉刷新重置列表并重新加载
3. 滚动到底部自动加载下一页
4. 点击筛选按钮打开筛选面板
5. 选择筛选条件后列表自动更新
6. 点击商品卡片跳转到详情页
7. 显示加载状态和空状态
（预期结果）

参考 @src/pages/order/list.vue 的列表实现方式和
@src/components/FilterPanel.vue 的筛选面板样式
（参考示例）

简化版（日常使用）

对于简单任务，可以使用简化版：

less 复制代码

在 @src/components/ProductCard.vue 中实现商品卡片组件：
- Props: product (IProduct 类型)
- 显示：商品图片、名称、价格、销量
- 点击跳转到商品详情页
- 样式参考 @src/components/OrderCard.vue

进阶心法

心法 1：Think Like a Product Manager

不要只想"怎么实现"，要想"为什么实现"、"用户会怎么用"

diff 复制代码

不只是："实现搜索功能"

而是：
"实现搜索功能，因为用户需要快速找到商品，
支持：
- 模糊搜索（匹配商品名称、描述、标签）
- 搜索历史（最多保存 10 条，支持删除）
- 热门搜索推荐（显示 TOP 10 热搜词）
- 搜索结果高亮关键词
- 无结果时推荐相关商品
- 搜索防抖（300ms）
- 支持语音搜索（调用微信语音识别 API）"

心法 2：Embrace Iteration

第一版不需要完美，快速出原型，然后迭代优化

markdown 复制代码

V1: 基础功能（能用）
  - 实现核心功能
  - 基本的 UI
  - 简单的错误处理

V2: 优化体验（好用）
  - 优化交互流程
  - 改进视觉设计
  - 添加加载状态
  - 完善错误提示

V3: 性能优化（快用）
  - 优化渲染性能
  - 添加缓存机制
  - 图片懒加载
  - 请求防抖节流

V4: 完善细节（爱用）
  - 添加动画效果
  - 优化无障碍支持
  - 完善边界情况
  - 添加埋点统计

心法 3：Build a Knowledge Base

把常用的提示词、代码模板、最佳实践整理成文档

建议创建以下文档：

perl 复制代码

docs/
├── prompts/
│   ├── component-templates.md      # 组件开发模板
│   ├── api-integration.md          # API 对接模板
│   ├── page-templates.md           # 页面开发模板
│   └── refactoring-checklist.md   # 重构检查清单
├── standards/
│   ├── code-style.md               # 代码风格规范
│   ├── naming-conventions.md      # 命名规范
│   ├── typescript-guide.md        # TypeScript 使用指南
│   └── performance-checklist.md   # 性能优化清单
└── best-practices/
    ├── vue3-patterns.md            # Vue 3 最佳实践
    ├── error-handling.md           # 错误处理最佳实践
    ├── state-management.md         # 状态管理最佳实践
    └── testing-guide.md            # 测试指南

心法 4：Teach the AI Your Style

通过 .cursorrules 或项目规范文件，让 AI 了解你的编码风格

typescript 复制代码

// .cursorrules 示例

# 项目规范

## 技术栈
- Vue 3 + TypeScript + Pinia + uni-app
- 使用 Composition API + <script setup>
- 使用 SCSS 预处理器

## 代码规范
- 组件使用 PascalCase 命名
- 文件名使用 kebab-case
- 所有函数必须有 JSDoc 注释
- 使用 interface 而不是 type（除非必要）
- Props 和 Emits 必须定义 TypeScript 类型
- 不使用 any，必要时使用 unknown

## 错误处理
- 所有异步操作必须有 try-catch
- 使用统一的 errorHandler 处理错误
- 错误信息要用户友好，不暴露技术细节

## 性能要求
- 列表超过 100 项使用虚拟滚动
- 图片必须懒加载
- 请求必须防抖或节流
- 避免不必要的重渲染

## 文件组织
- 页面文件放在 src/pages/
- 公共组件放在 src/components/
- 业务组件放在页面目录下的 components/
- API 接口放在 src/api/
- 类型定义放在 src/types/
- 工具函数放在 src/utils/
- Composables 放在 src/composables/

心法 5：Review Like a Senior Developer

不要盲目信任 AI，要像 Code Review 一样审查代码

Code Review 检查清单

arduino 复制代码

□ 功能正确性
  □ 实现了所有需求
  □ 边界情况处理正确
  □ 错误处理完善

□ 代码质量
  □ 逻辑清晰，易于理解
  □ 命名规范，见名知意
  □ 注释充分，解释清楚
  □ 没有重复代码

□ 类型安全
  □ 所有类型定义完整
  □ 没有使用 any
  □ Props 和 Emits 类型正确
  □ API 响应类型定义

□ 性能
  □ 没有不必要的重渲染
  □ 列表渲染优化（key、v-memo）
  □ 图片懒加载
  □ 请求防抖节流

□ 安全性
  □ 用户输入验证
  □ XSS 防护
  □ 敏感信息不暴露
  □ 权限检查

□ 可维护性
  □ 代码模块化
  □ 职责单一
  □ 易于测试
  □ 易于扩展

□ 用户体验
  □ 加载状态
  □ 错误提示
  □ 空状态处理
  □ 交互反馈

□ 规范遵守
  □ 符合项目编码规范
  □ 符合 Git 提交规范
  □ 符合命名规范
  □ 符合文件组织规范

实战案例

案例 1：从零实现用户登录功能

第1轮：架构设计

提示词：

diff 复制代码

设计用户登录功能的整体架构：
- 支持手机号+验证码登录
- 支持账号+密码登录
- 需要记住登录状态
- 需要 Token 管理和自动刷新
请给出文件组织结构和技术方案

AI 回应：

bash 复制代码

文件组织：
src/
├── pages/login/
│   ├── index.vue           # 登录页（选择登录方式）
│   ├── phone.vue           # 手机号登录
│   └── password.vue        # 密码登录
├── api/auth.ts             # 认证相关 API
├── types/auth.ts           # 认证相关类型
├── stores/useAuthStore.ts  # 认证状态管理
└── composables/
    └── useAuth.ts          # 认证逻辑封装

技术方案：
1. Token 存储：uni.setStorageSync
2. Token 刷新：拦截器自动刷新
3. 登录状态：Pinia Store 管理
4. 路由守卫：检查登录状态

第2轮：实现手机号登录

提示词：

less 复制代码

在 @src/pages/login/phone.vue 中实现手机号+验证码登录：

功能：
1. 手机号输入（11位数字，实时校验）
2. 发送验证码按钮（60秒倒计时）
3. 验证码输入（6位数字）
4. 登录按钮（表单验证通过后可点击）

API：
- 发送验证码：POST /api/v1/auth/send-code
- 登录：POST /api/v1/auth/login

技术要求：
- 使用 Vue 3 Composition API + TypeScript
- 表单验证使用 uni-app 内置验证
- 调用 @src/api/auth.ts 中的接口
- 登录成功后保存 token 到 @src/stores/useAuthStore.ts
- 跳转到首页

样式：
- 参考 @src/pages/login/index.vue 的整体风格
- 输入框使用圆角卡片样式
- 按钮使用渐变色

第3轮：优化用户体验

提示词：

markdown 复制代码

优化 @src/pages/login/phone.vue 的用户体验：

1. 输入优化：
   - 手机号输入自动添加空格（3-4-4 格式）
   - 验证码输入自动聚焦到下一位
   - 支持粘贴验证码自动填充

2. 反馈优化：
   - 发送验证码成功显示 Toast
   - 登录中显示 Loading
   - 登录失败显示错误提示
   - 表单验证失败高亮错误字段

3. 动画效果：
   - 页面进入淡入动画
   - 按钮点击缩放反馈
   - 错误提示抖动动画

4. 边界情况：
   - 网络错误重试
   - 验证码过期提示
   - 频繁发送验证码限制

案例 2：优化现有商品列表性能

第1轮：性能分析

提示词：

diff 复制代码

分析 @src/pages/product/list.vue 的性能问题：
- 当前有 1000+ 商品数据
- 滚动时有明显卡顿
- 图片加载慢
- 筛选条件改变时整个列表重新渲染

请使用 Vue DevTools 分析性能瓶颈，
并给出优化方案

第2轮：实施优化

提示词：

markdown 复制代码

优化 @src/pages/product/list.vue 的性能：

1. 列表渲染优化：
   - 使用虚拟滚动（uni-app 的 recycle-view）
   - 使用 v-memo 避免不必要的重渲染
   - 优化 key 的使用

2. 图片加载优化：
   - 使用图片懒加载
   - 使用缩略图（小尺寸）
   - 添加占位图

3. 筛选优化：
   - 筛选条件改变时只更新数据，不重新渲染整个列表
   - 使用防抖避免频繁筛选

4. 数据优化：
   - 添加列表数据缓存
   - 分页加载，每页 20 条

目标：
- 1000 条数据渲染时间 < 100ms
- 滚动帧率 > 55fps
- 图片加载使用渐进式加载

案例 3：重构混乱的组件

第1轮：代码审查

提示词：

diff 复制代码

审查 @src/pages/order/detail.vue 的代码质量：
- 文件有 800+ 行
- 逻辑混乱，难以维护
- 没有类型定义
- 没有注释

请分析存在的问题，并给出重构方案

第2轮：拆分组件

提示词：

markdown 复制代码

重构 @src/pages/order/detail.vue，按以下方案拆分：

1. 拆分组件：
   - OrderHeader.vue（订单头部信息）
   - OrderProducts.vue（商品列表）
   - OrderAddress.vue（收货地址）
   - OrderPrice.vue（价格明细）
   - OrderActions.vue（操作按钮）

2. 抽离逻辑：
   - useOrderDetail.ts（订单详情逻辑）
   - useOrderActions.ts（订单操作逻辑）

3. 类型定义：
   - 在 @src/types/order.ts 中定义所有类型

4. 要求：
   - 每个组件 < 200 行
   - 所有 Props 和 Emits 定义类型
   - 添加 JSDoc 注释
   - 保持功能不变

总结

Vibe Coding 的本质

Vibe Coding 不是让 AI 替你写代码，而是让 AI 成为你的编程伙伴

三个关键点

清晰表达：用准确的语言描述你的意图
持续迭代：不追求一次完美，快速迭代优化
代码审查：始终审查 AI 生成的代码，确保质量

记住这些原则

最好的提示词不是最长的，而是最清晰的
最好的代码不是 AI 生成的，而是你审查过的
最好的开发者不是不用 AI 的，而是会用 AI 的

持续学习

Vibe Coding 是一个不断进化的领域：

关注 AI 能力更新：新功能、新特性
总结最佳实践：记录有效的提示词模板
分享经验：与团队分享 Vibe Coding 技巧
保持好奇：探索 AI 的边界和可能性

性能与成本优化

Token 使用优化策略

在使用 AI 编码工具时，合理控制 Token 消耗不仅能降低成本，还能提升响应速度。

1. 精准的上下文管理

只添加必要的文件到上下文

perl 复制代码

❌ 不好：让 AI 读取整个项目
"帮我看看项目中所有的登录相关代码"

✅ 更好：精确引用需要的文件
"检查 @src/pages/login/phone.vue 和 @src/api/auth.ts 中的登录逻辑"

及时清理上下文

对话过长时（>50 轮）开启新对话
完成一个功能模块后，总结要点，开启新对话
避免在同一对话中处理多个不相关的任务

分层提问策略

arduino 复制代码

❌ 低效方式：
"帮我实现一个完整的订单系统，包括列表、详情、支付等所有功能"
// 这会生成大量 token，可能不准确

✅ 高效方式：
第1步："设计订单系统的整体架构和文件组织"
第2步："实现订单列表页，参考 @src/pages/product/list.vue"
第3步："实现订单详情页，使用 @src/types/order.ts 的类型定义"
第4步："集成支付功能"
// 精确引用，减少上下文，提高准确度

2. 减少 Token 消耗的技巧

使用代码引用而非完整代码

perl 复制代码

❌ 不好：把整个文件内容粘贴进来
"这是我的代码：[粘贴 500 行代码]，帮我优化"

✅ 更好：使用文件引用和行号
"优化 @src/pages/order/list.vue 第 45-60 行的列表渲染逻辑"

明确的问题描述

perl 复制代码

❌ 模糊描述（AI 需要多轮对话确认）：
"这个组件有问题，帮我看看"

✅ 精确描述（一次性解决）：
"CategoryTabs 组件在切换时状态不更新，
怀疑是 props 响应式问题，
请检查 @src/pages/index/components/CategoryTabs.vue 第 45-60 行"

利用项目规则

在 .cursorrules 中定义项目规范
AI 会自动遵循这些规则，无需每次重复
减少"请使用 TypeScript"、"请用 Vue 3 Composition API"等重复指令

3. 提高生成速度的策略

使用快捷指令

根据项目规则定义快捷方式：

arduino 复制代码

// 在 .cursorrules 中定义
- 'figma2vue' - 快速从设计生成页面
- '组件拆分' - 快速拆分组件
- '跑多语言' - 快速处理国际化

批量操作

typescript 复制代码

// ✅ 一次性提问多个相关问题
"请帮我：
1. 创建 OrderList 组件的类型定义
2. 实现分页逻辑
3. 添加加载状态
参考 @src/pages/product/list.vue 的实现"

// 而不是分三次问，每次都要重新理解上下文

使用模板和代码片段

创建常用的代码模板，减少重复生成：

typescript 复制代码

// templates/page-template.vue
<script setup lang="ts">
import { ref, onMounted } from 'vue'

// TODO: 添加具体逻辑
</script>

<template>
  <view class="page">
    <!-- TODO: 添加内容 -->
  </view>
</template>

<style lang="scss" scoped>
.page {
  // TODO: 添加样式
}
</style>

4. 智能使用不同的 AI 模型

根据任务选择模型

任务类型	推荐模型	原因
简单重复任务	GPT-3.5 / Claude Haiku	更快更便宜
代码格式化、简单重构	GPT-3.5	成本低，速度快
复杂架构设计	GPT-4 / Claude Sonnet	理解力强，质量高
代码审查	Claude Sonnet	注重细节，准确度高
算法优化	GPT-4 Turbo	推理能力强

Cursor 快捷键优化

css 复制代码

Cmd/Ctrl + K - 快速编辑（适合小改动，token 消耗少）
Cmd/Ctrl + L - 聊天模式（适合复杂问题）
Cmd/Ctrl + I - 内联编辑（最省 token）

5. 代码复用和组件化

建立组件库

typescript 复制代码

// 优先使用现有组件，减少重复生成
components/
├── Base/          // 基础组件（高复用）
│   ├── BaseButton.vue
│   ├── BaseInput.vue
│   └── BaseEmpty.vue
├── Business/      // 业务组件（中复用）
│   ├── RegionPicker/
│   └── SkuPopup/
└── [Page]/        // 页面组件（低复用）

使用 Composables 复用逻辑

typescript 复制代码

// composables/useOrder.ts
export function useOrder() {
    // 订单相关逻辑
    const orders = ref([])
    const loading = ref(false)

    const fetchOrders = async () => {
        // ...
    }

    return { orders, loading, fetchOrders }
}

// 在多个页面中复用，而不是重复生成
import { useOrder } from '@/composables'

6. 增量式开发

先骨架后细节

arduino 复制代码

第一步：生成页面结构和路由（快速搭建）
  "创建订单列表页面的基础结构"

第二步：实现核心功能（能用）
  "实现订单列表的数据加载和展示"

第三步：添加交互（好用）
  "添加搜索、筛选、排序功能"

第四步：优化体验（爱用）
  "添加加载状态、空状态、错误处理"

第五步：性能优化（快用）
  "优化列表渲染性能，添加虚拟滚动"

使用 TODO 标记

typescript 复制代码

// ✅ 让 AI 只实现关键部分
const handleSubmit = async () => {
    // TODO: 添加表单验证
    // TODO: 调用 API
    // TODO: 处理错误
    // TODO: 成功后跳转
}

// 然后分别让 AI 实现每个 TODO
// 每次只消耗少量 token

7. 利用缓存和记忆

使用 Cursor 的记忆功能

diff 复制代码

让 AI 记住：
- 项目特定的约定和规范
- 常用的代码模式
- 你的偏好设置
- 团队的命名规则

这样每次对话不需要重复说明

本地代码搜索优先

markdown 复制代码

工作流程：
1. ✅ 先用 Cmd/Ctrl + P 搜索现有代码
2. ✅ 再用 Cmd/Ctrl + Shift + F 全局搜索
3. ✅ 查看项目文档和注释
4. ❌ 最后才问 AI（如果找不到）

这样可以节省 50-70% 的 AI 调用

8. 成本对比与选择

主流 AI 模型成本对比（2026年1月）

模型	输入成本	输出成本	适用场景
GPT-4 Turbo	$0.01/1K tokens	$0.03/1K tokens	复杂架构、算法设计
Claude Sonnet	$0.003/1K tokens	$0.015/1K tokens	代码审查、重构
GPT-3.5 Turbo	$0.0005/1K tokens	$0.0015/1K tokens	简单任务、格式化
Claude Haiku	$0.00025/1K tokens	$0.00125/1K tokens	重复性任务

节省成本的策略

markdown 复制代码

1. 简单问题用便宜模型
   - 代码格式化 → GPT-3.5
   - 简单重构 → Claude Haiku
   - 类型定义 → GPT-3.5

2. 复杂问题用高级模型
   - 架构设计 → GPT-4 Turbo
   - 性能优化 → Claude Sonnet
   - 算法实现 → GPT-4

3. 批量处理
   - 一次性处理多个相关任务
   - 减少对话轮次
   - 提高 token 利用率

4. 使用本地工具
   - ESLint（代码检查）
   - Prettier（代码格式化）
   - TypeScript（类型检查）
   - 不需要 AI 的不用 AI

9. 其他 AI 编码工具对比

GitHub Copilot

优势：实时补全，速度快，IDE 集成好
适用：日常编码、快速补全、代码片段
成本：$10/月（固定费用）
推荐场景：作为基础工具，处理 80% 的日常编码

Codeium

优势：免费，支持多种 IDE，功能全面
适用：预算有限的开发者、学习阶段
成本：免费（个人版）
推荐场景：个人项目、学习练习

Tabnine

优势：可本地部署，隐私性好，企业级
适用：企业级项目、隐私敏感项目
成本：$12-39/月
推荐场景：企业项目、对代码隐私有要求

Cursor

优势：深度集成，上下文理解好，多模型支持
适用：复杂项目、架构设计、代码重构
成本：$20/月（Pro）
推荐场景：专业开发、复杂业务逻辑

推荐组合方案

diff 复制代码

方案 1：性价比最高
- 日常编码：GitHub Copilot（$10/月）
- 复杂问题：Cursor + Claude Sonnet（$20/月）
- 总成本：$30/月

方案 2：预算有限
- 日常编码：Codeium（免费）
- 复杂问题：Claude API 直接调用（按需付费）
- 总成本：<$10/月

方案 3：专业开发
- 日常编码：GitHub Copilot（$10/月）
- 架构设计：Cursor + GPT-4（$20/月）
- 代码审查：Claude Sonnet API（按需）
- 总成本：$30-40/月

方案 4：团队协作
- 统一使用 Cursor Team（$40/月/人）
- 配置团队规则和知识库
- 共享最佳实践和提示词模板

10. 实战优化示例

优化前（低效方式）

diff 复制代码

对话轮次：15 轮
Token 消耗：约 50,000 tokens
时间：45 分钟
成本：约 $0.75

问题：
- 每次都重新描述需求
- 没有引用相关文件
- 一次性要求太多功能
- 频繁修改和调整

优化后（高效方式）

diff 复制代码

对话轮次：5 轮
Token 消耗：约 15,000 tokens
时间：15 分钟
成本：约 $0.23

改进：
- 使用 @文件名 精确引用
- 分步骤实现，每步明确
- 利用项目规则，减少重复说明
- 使用模板和参考实现

节省效果

erlang 复制代码

Token 节省：70%
时间节省：67%
成本节省：69%
质量提升：代码更规范，bug 更少

11. 最佳实践清单

开始编码前

明确任务目标和范围
准备好相关文件引用
检查是否有类似实现可参考
确认技术栈和约束条件
选择合适的 AI 模型

编码过程中

代码生成后

持续优化

总结有效的提示词模板
建立项目知识库
记录常见问题和解决方案
定期回顾和优化工作流
与团队分享最佳实践

性能优化总结

通过以上策略，你可以：

降低 50-70% 的 Token 消耗
提升 2-3 倍的开发效率
减少 60-80% 的成本
提高代码质量和一致性

记住：最好的优化不是少用 AI，而是更智能地使用 AI。

附录

常用提示词模板库

1. 功能实现类

ini 复制代码

在 @[文件路径] 中实现 [功能名称]：

功能描述：
- [功能点1]
- [功能点2]

技术要求：
- [技术要求1]
- [技术要求2]

约束条件：
- [约束1]
- [约束2]

参考：@[参考文件]

2. Bug 修复类

ini 复制代码

修复 @[文件路径] 中的问题：

问题描述：
- 现象：[问题表现]
- 预期：[期望结果]
- 错误信息：[错误日志]

复现步骤：
1. [步骤1]
2. [步骤2]

环境信息：
- [浏览器/设备/版本]

3. 性能优化类

ini 复制代码

优化 @[文件路径] 的性能：

当前问题：
- [性能问题1]
- [性能问题2]

优化目标：
- [具体指标]

优化方向：
- [方向1]
- [方向2]

4. 代码重构类

diff 复制代码

重构 @[文件路径]：

重构目标：
- [目标1]
- [目标2]

重构方案：
- [方案描述]

要求：
- 保持功能不变
- 添加必要的注释
- 提高代码可读性

Keep Vibing, Keep Coding! 🚀