使用AI cursor进行快速开发

Posted on Updated on

1. 明确需求阶段

✅ 好的提问方式：
"我需要开发一个用户登录功能，使用Vue3 + TypeScript，需要包含以下功能：
1. 用户名密码验证
2. 记住密码功能
3. 登录状态保持
请帮我设计代码结构。"

❌ 避免模糊的提问：
"帮我写个登录功能"

2. 代码开发阶段

2.1 请求初始代码框架

✅ 好的提问方式：
"请提供登录组件的基本结构，包括：
1. 组件的基本模板
2. 主要的响应式数据
3. 核心方法定义"

2.2 逐步完善功能

✅ 分步骤请求：
1. "请帮我完善表单验证逻辑"
2. "如何实现记住密码功能？"
3. "登录成功后的状态管理怎么处理？"

2.3 代码优化

✅ 好的提问方式：
"我现有的代码如下，请帮我：
1. 优化错误处理
2. 添加适当的注释
3. 提高代码复用性

[插入你的代码]"

3. 调试阶段

✅ 好的提问方式：
"我的代码出现以下错误：
[错误信息]

相关代码：
[代码片段]

我已经尝试了：
1. [你尝试过的解决方案]
2. [你查看过的文档]"

4. 实际案例演示

4.1 初始需求沟通

用户：我需要开发一个Todo List应用，使用Vue3 + TypeScript。

AI回应：让我们先定义基本需求：
1. 是否需要持久化存储？
2. 是否需要分类功能？
3. 是否需要截止日期？
请确认这些功能需求，我们再进行具体设计。

4.2 代码实现过程

<script setup lang="ts">
interface TodoItem {
  id: number
  title: string
  completed: boolean
  // ... 其他属性
}

// 核心响应式数据
const todos = ref<TodoItem[]>([])
const newTodo = ref('')

// 核心方法
const addTodo = () => {
  // 实现添加功能
}

const toggleTodo = (id: number) => {
  // 实现状态切换
}

const removeTodo = (id: number) => {
  // 实现删除功能
}
</script>

4.3 优化和改进

用户：代码运行时发现性能问题，如何优化？

AI回应：建议以下优化方案：
1. 使用计算属性优化过滤操作
2. 实现虚拟列表
3. 使用防抖处理输入事件

下面是优化后的代码：
// ... 原有代码 ...

// 添加计算属性
const filteredTodos = computed(() => {
  return todos.value.filter(/* 过滤逻辑 */)
})

// 添加防抖
const debouncedInput = useDebounceFn((val: string) => {
  // 处理输入
}, 300)

5. 最佳实践建议

  1. 提供上下文
✅ 好的方式：
"我正在使用 Vue3 + Vite + TypeScript 开发，当前代码如下：
[代码片段]
我想实现 [具体功能]"
  1. 分享报错信息
✅ 好的方式：
"遇到以下错误：
[完整的错误信息]
[错误发生的上下文]
[相关的代码片段]"
  1. 迭代优化
✅ 好的方式：
"基于你上一个建议，我修改后遇到了新问题：
[具体描述]
[更新后的代码]"

6. 持续优化

  1. 代码审查
✅ 好的提问方式：
"请帮我审查以下代码：
[代码片段]
特别关注：
1. 性能优化
2. 安全性
3. 最佳实践"
  1. 功能扩展
✅ 好的提问方式：
"基于现有代码：
[代码片段]
我想添加以下新功能：
1. [新功能1]
2. [新功能2]
请提供实现建议"

 

Post Views: 4