02# Cursor实战：从安装到Agent模式

本文目录

安装
首次配置
实践项目初始化
Tab模式（光标级补全）
Chat模式（对话级交互）
Agent模式（执行级协作）
AGENTS.md（项目根目录）
.cursor/rules/\.mdc（项目规则）
用户规则（全局）
规则层级的优先级
第一步：搭骨架
第二步：加交互
第三步：加样式
第四步：加拖拽支持
为什么Agent不遵守我的Rules？
为什么Tab补全的内容总是不对？
Agent模式下的文件修改可以撤销吗？
规则文件太多会不会影响性能？

上一篇我们聊了[Vibe Coding的思维框架](https://juejin.cn/post/7686090678486122547 "https://juejin.cn/post/7686090678486122547")，这一篇直接进入实战。我会用实践项目的前端部分，任务管理应用，带你从安装Cursor开始，一步步配置好Rules、跑通三种交互模式，最后用Agent模式把任务卡片组件写出来。

选Cursor的原因很简单：它是目前前端开发者用得最多的AI编辑器，界面就是VS Code，迁移成本几乎为零。但大部分人的用法停留在"按Tab补全"，完全没有发挥出Agent模式的威力。

环境准备

安装

从 cursor.com 下载安装包，支持macOS、Windows、Linux。安装完成后用GitHub账号登录，免费版每月有2000次Tab补全和50次Chat。

如果你已经有VS Code的插件和配置，Cursor会自动导入。打开Cursor后，左侧边栏和VS Code几乎一样，但顶部多了一个Chat面板入口。

首次配置

安装后第一件事：打开设置（Cmd + ,），找到"Models"选项卡，确认默认模型是Claude或GPT-4o。Cursor会根据你的账号额度自动选择，但你可以手动切换。

然后打开Cursor Settings > Rules，确认规则功能已启用。如果你的团队有统一的规则配置，可以在这里导入。

实践项目初始化

在终端里创建项目：

<span>mkdir</span> task-manager && <span>cd</span> task-manager
npm create vue@latest . -- --typescript --pinia --router
npm install
npm install -D tailwindcss @tailwindcss/vite

在vite.config.ts里加上Tailwind插件：

<span>import</span> { defineConfig } <span>from</span> <span>'vite'</span>
<span>import</span> vue <span>from</span> <span>'@vitejs/plugin-vue'</span>
<span>import</span> tailwindcss <span>from</span> <span>'@tailwindcss/vite'</span>

<span>export</span> <span>default</span> <span>defineConfig</span>({
  <span>plugins</span>: [<span>vue</span>(), <span>tailwindcss</span>()],
})

在src/assets/main.css里加上：

<span>@import</span> <span>"tailwindcss"</span>;

现在在终端里运行npm run dev，确认项目能跑起来。这个Vue3 + Pinia + Tailwind CSS的脚手架就是我们接下来所有实战的起点。

三种交互模式

Cursor有三种和AI交互的方式，理解它们的区别是正确使用Cursor的关键。

Tab模式（光标级补全）

这是最轻量的模式。你写代码时，Cursor会在光标处实时推荐下一行代码。看到推荐后：

按Tab接受推荐
按Esc忽略推荐
按Ctrl+→逐词接受推荐

Tab模式适合补全函数体、补全import语句、补全重复的代码块。它不会改变你已有的代码，只在光标位置插入新内容。

关键点： Tab模式不读取你的上下文，它只根据当前文件和光标位置推荐。所以如果你写一个复杂组件，Tab补全的内容可能不符合你的设计模式。

Chat模式（对话级交互）

按Cmd + L打开Chat面板。你可以在这里和AI对话，讨论架构、解释代码、生成文件。

Chat模式的核心优势是可以引用上下文。在输入框里打@，你会看到：

@Files：引用项目中的文件
@Codebase：搜索整个代码库
@Docs：引用文档
@Web：搜索网页
@Code：引用特定代码块

比如你想让AI帮你设计组件结构，可以输入：

<span>@Codebase</span> 这个项目目前有哪些组件？帮我规划一下任务卡片相关的组件结构。

Cursor会先搜索你的项目，理解现有结构，然后给出具体的组件规划。

关键点： Chat模式不会修改你的代码，它只生成建议。你需要手动复制代码或点击"Apply"按钮。

Agent模式（执行级协作）

按Cmd + I进入Agent模式。这是最强大的模式，AI可以直接读取、修改、创建你的文件，运行终端命令，搜索代码库。

Agent模式的工作方式是：

你描述一个任务
Cursor分析你的项目结构
生成一个执行计划（你可以在"Plan"标签里看到）
逐步执行：创建文件、写入代码、运行命令
每一步完成后询问你是否继续

关键点： Agent模式会实际修改你的文件。如果AI做错了，你可以按Cmd + Z回退，或者在Agent面板里点击"Undo"撤销某一步。

三种模式的分工很明确：Tab补全日常代码，Chat讨论设计决策，Agent执行具体任务。不要用Chat做Tab能做的事，也不要用Agent做Chat能做的事。

Rules配置

Rules是Cursor的大脑。你告诉它"这个项目是什么、有什么规矩"，它会在每次对话中自动参考。

Cursor支持四种规则层级：

AGENTS.md（项目根目录）

最简单的规则方式。在项目根目录创建AGENTS.md，Cursor会自动读取。

我会这样写：

<span># 任务管理应用 - 前端</span>

<span>## 技术栈</span>
<span>-</span> Vue 3.3+ (Composition API + <span><span><<span>script</span> <span>setup</span>></span></span>)
<span>-</span> TypeScript 严格模式
<span>-</span> Pinia 状态管理
<span>-</span> Tailwind CSS 样式
<span>-</span> Vitest + Vue Test Utils 测试

<span>## 项目结构</span>
<span>-</span> src/components/ui/ # 基础UI组件
<span>-</span> src/components/features/ # 业务组件
<span>-</span> src/stores/ # Pinia store
<span>-</span> src/types/ # TypeScript 类型定义
<span>-</span> src/composables/ # 组合式函数

<span>## 组件规范</span>
<span>-</span> 使用 <span><span><span><<span>script</span> <span>setup</span> <span>lang</span>=<span>"ts"</span>></span></span></span>
<span>-</span> Props 必须用 defineProps<{...}>() 定义类型
<span>-</span> Emits 必须用 defineEmits<{...}>() 定义类型
<span>-</span> 样式只用 Tailwind CSS utility classes，不写自定义 CSS
<span>-</span> 组件内不处理业务逻辑，通过 events 通知父组件

这个文件会被所有对话自动引用。你可以把它提交到Git，团队成员共享同一份规则。

.cursor/rules/*.mdc（项目规则）

如果你想让规则更精细，比如某些规则只在修改Vue文件时生效，就在.cursor/rules/目录下创建.mdc文件。

.mdc文件必须包含frontmatter：

---
description: Vue 组件开发规范
<span>globs: ["<span>*.vue", "*</span>.ts"]
---</span>

<span># Vue 组件规范</span>

<span>-</span> 组件文件用 PascalCase 命名（如 TaskCard.vue）
<span>-</span> 一个文件只放一个组件
<span>-</span> Props 和 Emits 的类型定义放在组件文件顶部
<span>-</span> 公共组件（src/components/ui/）不依赖业务 store

globs字段告诉Cursor这条规则在什么时候自动应用。比如上面这条规则，只有当你在编辑.vue或.ts文件时才会被注入到上下文中。

如果你省略globs和description，这条规则就变成了"手动触发"，你可以在Chat里用@rule-name来手动引用它。

用户规则（全局）

在Cursor Settings > Rules里可以添加用户规则。这些规则会应用到你所有的项目。

我通常在这里写一些通用偏好：

<span>-</span> 回复用中文
<span>-</span> 代码注释用英文
<span>-</span> 不要生成测试代码，除非我明确要求

规则层级的优先级

当多个规则同时生效时，优先级从高到低是：

Team Rules（团队规则）
Project Rules（项目规则）
User Rules（用户规则）
AGENTS.md

如果规则内容冲突，优先级高的规则覆盖低的。所以把项目特有的规范放在.cursor/rules/里，把通用偏好放在用户规则里，把项目概述放在AGENTS.md里。

实战：用Agent模式开发任务卡片

配置完成后，我们来写第一个组件。按Cmd + I进入Agent模式。

第一步：搭骨架

输入：

创建一个 TaskCard.vue 组件，要求：
<span>1.</span> 使用 <script setup lang=<span>"ts"</span>>
<span>2.</span> Props：task 对象，包含 id: <span>string</span>, title: <span>string</span>, <span>status</span>: <span>'todo'</span> | <span>'in-progress'</span> | <span>'done'</span>
<span>3.</span> 只显示标题和状态标签，不需要样式
<span>4.</span> 状态标签用不同文字显示

Cursor会创建src/components/features/TaskCard.vue，内容大概长这样：

<script setup lang="ts">
interface Task {
  id: string
  title: string
  status: 'todo' | 'in-progress' | 'done'
}

const props = defineProps<{
  task: Task
}>()
</script>

<template>
  <div>
    <span>{{ task.title }}</span>
    <span>{{ task.status }}</span>
  </div>
</template>

骨架搭好了。现在组件能渲染，没有报错，虽然很难看，但这就是迭代的起点。

第二步：加交互

继续在Agent模式里输入：

给 TaskCard 添加状态切换功能：点击状态标签时，在 todo → in-progress → <span>done</span> 之间循环切换，切换时触发 update:status 事件。

Cursor会修改TaskCard.vue，加上点击事件和emit。每次修改后，你会看到一个diff界面，可以选择接受或拒绝这步改动。

第三步：加样式

给 TaskCard 加上样式：
<span>- 容器用 Tailwind 的 p-4 rounded-lg shadow-sm</span>
<span>- 状态标签用 text-sm px-2 py-1 rounded，不同状态不同背景色</span>
<span>- 交互效果：hover 时 shadow-md，点击时 scale-95</span>

这时候如果你的.cursor/rules/里配了Tailwind规范，Cursor会严格使用utility classes，不会写出style="padding: 1rem"这种自定义样式。

第四步：加拖拽支持

在 TaskCard 上加上 vuedraggable 的支持：
<span>- 添加一个拖拽手柄图标</span>
<span>- 组件可以被拖拽</span>
<span>- 拖拽时有视觉反馈（半透明 + 缩放）</span>

Cursor会自动安装vuedraggable依赖，修改组件代码。如果安装失败，它会告诉你手动执行npm install vuedraggable@next。

每一步都只修改当前组件需要的部分，不涉及其他文件。如果某一步AI改坏了，回退到上一步就行。这就是上一篇说的"迭代式开发"在Cursor里的具体实现。

踩坑记录

为什么Agent不遵守我的Rules？

最常见的原因：规则写得太泛。"代码要简洁"这种规则AI不知道怎么执行。改成具体的要求："组件不超过100行，超过就拆分"，AI才能遵守。

另一个常见原因：规则文件放错位置。AGENTS.md必须在项目根目录，.cursor/rules/里的文件必须是.mdc扩展名。普通.md文件放在.cursor/rules/里不会被识别。

为什么Tab补全的内容总是不对？

Tab补全只根据当前文件和光标位置推荐，它不会读取其他文件。如果你在写一个依赖其他组件的复杂组件，Tab的推荐质量会下降。这时候用Chat模式，用@引用相关文件，让AI理解完整上下文。

Agent模式下的文件修改可以撤销吗？

可以。按Cmd + Z可以回退最近一次修改。在Agent面板里，点击某一步旁边的"Undo"按钮可以撤销那一步。如果你想回退整个任务，在Agent面板顶部点击"Revert All"。

但要注意：如果你在Agent执行过程中手动修改了某个文件，Agent可能会因为文件内容变化而报错。建议在Agent执行任务前先保存所有未保存的修改，或者创建一个git分支。

规则文件太多会不会影响性能？

会。Cursor在每次对话时会把所有适用的规则加载到上下文中。如果规则文件总行数超过500行，会占用大量的上下文窗口，影响AI的回复质量。

正确的做法是：按功能拆分规则，用globs控制每条规则的生效范围。比如Vue组件规范只在*.vue文件时生效，API规范只在*.ts文件时生效。这样每次对话只加载相关的规则。

本篇小结

Cursor的三个核心能力：Tab补全日常代码，Chat讨论设计决策，Agent执行具体任务。

Rules配置清单：

文件	位置	用途	优先级
AGENTS.md	项目根目录	项目概述、技术栈	低
.cursor/rules/\*.mdc	.cursor/rules/	精细化规则	中
用户规则	Cursor Settings	全局偏好	高
Team Rules	团队仪表盘	团队规范	最高

下一篇我们进入Claude Code实战。你会看到怎么在终端里用Claude Code写后端逻辑，怎么配置AGENTS.md让它理解你的后端规范，以及怎么用多Agent协作完成复杂的API开发任务。

参考资源：