企业官网建设流程全解析

本章你将收获

• Cursor与VS Code的6大核心差异对比（附详细性能测试数据）
• 安装、配置、登录全流程（含国内加速技巧和常见问题解决）
• 14个核心快捷键速查表 + 5个高级技巧（附动图描述）
• 内联代码生成深度实战：5个不同场景的完整示例（从函数到组件）
• 聊天面板高阶用法：代码解释、重构、测试生成、文档编写
• Rules设置：让AI记住你的偏好，输出风格一致的代码
• 一个完整实战：用Cursor从零写一个React + TypeScript待办应用（全流程代码）
• 10个常见问题与解决方案

2.1 从“要不要换编辑器”到“真香”——我的真实经历

在正式介绍Cursor之前，我想先说说我的“换编辑器心路历程”。用了五六年的VS Code，插件、快捷键、主题都配得舒舒服服，突然让我换一个编辑器，内心是抗拒的。第一次听说Cursor时，我心想：“又是一个套壳VS Code的噱头。”

转折发生在一个加班夜。当时我需要将一个300行的React类组件重构为函数组件+Hooks，还要同步修改5个依赖文件。手工改至少需要2小时。我用VS Code的Copilot试了试，只能逐行补全，帮不上大忙。

同事推给我Cursor，说：“你试试在聊天框里输入‘把这个组件改成函数组件，使用useState和useEffect，同步修改所有引用它的地方’。”我半信半疑地试了。Cursor不仅重写了组件本身，还列出了需要修改的5个文件，逐一给出改动建议。我花了20分钟review和微调，全部搞定。

当场我就下载了Cursor。用了两周后，我回不去VS Code了。不是因为VS Code不好，而是Cursor把“AI编程”变成了编辑器的基础能力，而不是插件级的附加功能。这一章，我把Cursor的核心功能、快捷键、实战技巧全部拆解，让你在30分钟内就能上手，并超过80%的Cursor用户。

2.2 Cursor与VS Code的6大核心差异（附实测数据）

一句话总结：Cursor不是“加了AI插件的VS Code”，而是以AI为核心的编辑器。它的设计哲学是：让AI成为你编程的第二大脑，而不是一个辅助工具。

2.3 安装与配置（5分钟，附常见问题解决）

步骤1：下载安装

• 官网 cursor.com，根据操作系统下载
• Windows / macOS / Linux 全支持
• 安装包大小约200MB，下载速度慢时可使用代理或镜像站（自行搜索）

步骤2：登录

• 打开Cursor，按Cmd+L（Mac）或Ctrl+L（Win）打开聊天面板
• 点击右上角设置图标 → Sign In → 用GitHub账号登录（推荐）
• 免费版有14天Pro试用，之后基础功能免费（高级模型如GPT-4需订阅）
• 常见问题：如果登录后无法使用聊天面板，尝试退出重新登录或清除缓存。

步骤3：配置AI模型（可选）

• Settings → Models → 可选择使用OpenAI或Anthropic的API密钥
• 默认使用Cursor自研模型（速度较快），建议先用默认
• 高级用户可配置自己的API密钥，成本更低

步骤4：导入VS Code配置（可选）

• Cursor支持导入VS Code的插件、主题、快捷键配置
• 打开命令面板（Cmd+Shift+P）→ 输入“Import VS Code” → 选择要导入的内容
• 我导入了我的主题（One Dark Pro）和快捷键，无缝迁移。

国内网络加速技巧：

• 如果下载Cursor安装包慢，可以尝试使用国内镜像站（如阿里云OSS共享链接，需自行搜索）
• 登录时如果卡住，可以尝试使用代理或修改hosts文件

2.4 14个核心快捷键速查表（建议截图保存）

记忆技巧：K = 代码生成（Kode），L = 聊天（Chat），E = 解释（Explain），R = 重构（Refactor），T = 测试（Test）。

2.5 内联代码生成深度实战（Cmd+K）——5个不同场景的完整示例

示例1：生成工具函数（日期格式化）

操作：新建dateUtils.js，光标置于空白行，按Cmd+K，输入：

“写一个函数，将Date对象格式化为‘YYYY-MM-DD HH:mm:ss’格式，补零。使用TypeScript。”

AI输出：

/** * 格式化日期为 YYYY-MM-DD HH:mm:ss * @param date - Date对象 * @returns 格式化后的字符串，例如 "2024-01-15 14:30:00" */exportfunctionformatDateTime(date:Date):string{constyear=date.getFullYear();constmonth=String(date.getMonth()+1).padStart(2,'0');constday=String(date.getDate()).padStart(2,'0');consthours=String(date.getHours()).padStart(2,'0');constminutes=String(date.getMinutes()).padStart(2,'0');constseconds=String(date.getSeconds()).padStart(2,'0');return`${year}-${month}-${day}${hours}:${minutes}:${seconds}`;}

不满意的地方：我想让它也支持时间戳参数。继续选中函数，按Cmd+K，输入“增加重载，支持传入时间戳（number类型）”。AI修改为：

exportfunctionformatDateTime(date:Date):string;exportfunctionformatDateTime(timestamp:number):string;exportfunctionformatDateTime(input:Date|number):string{constdate=inputinstanceofDate?input:newDate(input);// 同上}

示例2：生成React组件（带Props类型）

操作：新建UserCard.tsx，按Cmd+K，输入：

“生成React组件UserCard，接收Props：name(string), avatar(string), role(‘admin’|‘user’)。显示头像、姓名、角色标签，角色不同颜色不同。使用TailwindCSS。添加JSDoc。”

AI输出：

import React from 'react'; interface UserCardProps { /** 用户姓名 */ name: string; /** 头像URL */ avatar: string; /** 角色：admin或user */ role: 'admin' | 'user'; } /** * 用户卡片组件 * @param props - 组件属性 */ const UserCard: React.FC<UserCardProps> = ({ name, avatar, role }) => { const roleStyles = { admin: 'bg-red-100 text-red-800', user: 'bg-blue-100 text-blue-800', }; return ( <div className="flex items-center p-4 border rounded-lg shadow-sm hover:shadow-md transition"> <img src={avatar} alt={name} className="w-12 h-12 rounded-full mr-4" /> <div> <div className="font-semibold">{name}</div> <span className={`px-2 py-1 text-xs rounded-full ${roleStyles[role]}`}> {role === 'admin' ? '管理员' : '普通用户'} </span> </div> </div> ); }; export default UserCard;

示例3：生成Express API（带验证）

操作：新建authController.ts，按Cmd+K，输入：

“生成Express API，用户注册。接收email, password。验证邮箱格式、密码长度≥6。使用bcrypt哈希密码，返回成功消息。输出TypeScript代码。”

AI输出：

import{Request,Response}from'express';importbcryptfrom'bcrypt';import{z}from'zod';constregisterSchema=z.object({email:z.string().email('邮箱格式不正确'),password:z.string().min(6,'密码至少6位'),});exportconstregister=async(req:Request,res:Response)=>{constresult=registerSchema.safeParse(req.body);if(!result.success){returnres.status(400).json({errors:result.error.errors});}const{email,password}=result.data;consthashedPassword=awaitbcrypt.hash(password,10);// 模拟保存用户returnres.status(201).json({message:'注册成功',email});};

示例4：生成数据库查询（SQL+索引建议）

操作：在聊天面板中（不限于文件）输入：

“写SQL查询过去30天订单金额前10的用户，表orders(id, user_id, amount, created_at)，users(id, name)。给出索引建议。”

AI输出：

-- 查询SELECTu.name,SUM(o.amount)astotalFROMorders oJOINusers uONo.user_id=u.idWHEREo.created_at>=NOW()-INTERVAL'30 days'GROUPBYu.id,u.nameORDERBYtotalDESCLIMIT10;-- 索引建议CREATEINDEXidx_orders_created_atONorders(created_at);CREATEINDEXidx_orders_user_idONorders(user_id);-- 复合索引可进一步优化CREATEINDEXidx_orders_user_date_amountONorders(user_id,created_at,amount);

示例5：生成Dockerfile（多阶段构建）

操作：按Cmd+K输入：

“为Node.js项目生成多阶段构建的Dockerfile，使用alpine镜像，复制package.json先装依赖，再复制源码，暴露3000端口。”

AI输出：

# 阶段1: 依赖安装 FROM node:18-alpine AS deps WORKDIR /app COPY package*.json ./ RUN npm ci --only=production # 阶段2: 构建 FROM node:18-alpine AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . RUN npm run build # 阶段3: 运行 FROM node:18-alpine WORKDIR /app COPY --from=builder /app/dist ./dist COPY --from=builder /app/node_modules ./node_modules EXPOSE 3000 CMD ["node", "dist/index.js"]

2.6 聊天面板高阶用法（Cmd+L）——4个实战场景

场景1：代码解释+性能分析

选中一段复杂的递归函数，按Cmd+L，输入：

“逐行解释这段代码，并指出时间复杂度，给出优化建议。”

AI会逐行解释，计算复杂度，并给出优化版本（如改为迭代）。

场景2：重构代码（添加错误处理）

选中一个没有错误处理的异步函数，输入：

“给这个函数添加try-catch，并返回友好的错误信息。”

AI会修改代码，增加错误捕获。

场景3：生成单元测试

选中一个工具函数，输入：

“为这个函数生成Jest单元测试，覆盖正常、边界、异常。”

AI输出完整测试代码。

场景4：编写文档

选中整个模块，输入：

“为这个模块生成README文档，包含安装、使用示例、API说明。”

AI输出Markdown格式文档。

2.7 Rules设置——让AI记住你的偏好

Cursor的Rules相当于给AI设置“全局指令”。例如你希望AI总是输出TypeScript、使用箭头函数、添加JSDoc，可以一次性写好。

我的Rules文件（.cursorrules）：

你是一位资深前端工程师，遵循以下规范： - 所有代码使用TypeScript，提供完整类型定义。 - 使用函数组件和Hooks，不使用类组件。 - 样式使用TailwindCSS。 - 添加JSDoc注释，包含@param和@returns。 - 优先使用const，其次let，禁止var。 - 异步操作使用async/await，错误处理必须try-catch。 - 只输出代码，不要解释。如必须解释，用注释写在代码内。

保存后，所有新对话都会遵循这些规则。我实测下来，有了Rules后AI生成的代码风格一致性提升80%以上。

2.8 完整实战：用Cursor从零写一个React + TypeScript待办应用（全流程代码）

需求：

• 待办清单：添加、删除、标记完成
• 本地存储持久化
• 显示未完成数量
• 支持编辑待办（双击文字）
• 使用TailwindCSS样式

步骤1：创建项目骨架

• 用Cmd+K生成Todo.tsx骨架，输入：

“生成React组件TodoApp，使用TypeScript和TailwindCSS。功能：输入框添加待办，显示列表，每个待办有删除按钮和复选框，显示未完成数量。包含本地存储。”

AI生成初版（约100行）。

步骤2：添加编辑功能

• 选中待办列表渲染部分，按Cmd+L输入：

“双击待办文字时变为可编辑的输入框，按回车保存，失焦保存。修改对应的状态管理。”

AI修改代码，增加editingId和editText状态，以及startEdit、saveEdit函数。

步骤3：修复bug（复选框状态不更新）

• 运行测试，发现复选框勾选后未保存到localStorage。选中toggleTodo函数，按Cmd+Shift+K输入：

“修复：toggleTodo后同步更新localStorage。”

AI修正为在setTodos后加上useEffect监听todos变化自动保存。

最终代码（核心部分）：

import React, { useState, useEffect } from 'react'; interface Todo { id: number; text: string; completed: boolean; } const TodoApp: React.FC = () => { const [todos, setTodos] = useState<Todo[]>([]); const [input, setInput] = useState(''); const [editingId, setEditingId] = useState<number | null>(null); const [editText, setEditText] = useState(''); useEffect(() => { const stored = localStorage.getItem('todos'); if (stored) setTodos(JSON.parse(stored)); }, []); useEffect(() => { localStorage.setItem('todos', JSON.stringify(todos)); }, [todos]); const addTodo = () => { if (!input.trim()) return; setTodos([...todos, { id: Date.now(), text: input, completed: false }]); setInput(''); }; const toggleTodo = (id: number) => { setTodos(todos.map(t => t.id === id ? { ...t, completed: !t.completed } : t)); }; const deleteTodo = (id: number) => { setTodos(todos.filter(t => t.id !== id)); }; const startEdit = (todo: Todo) => { setEditingId(todo.id); setEditText(todo.text); }; const saveEdit = (id: number) => { if (editText.trim()) { setTodos(todos.map(t => t.id === id ? { ...t, text: editText } : t)); } setEditingId(null); setEditText(''); }; const remaining = todos.filter(t => !t.completed).length; return ( <div className="max-w-md mx-auto mt-10 p-4 bg-white rounded shadow"> <h1 className="text-2xl font-bold mb-4">待办清单</h1> <div className="flex gap-2 mb-4"> <input type="text" value={input} onChange={(e) => setInput(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && addTodo()} className="flex-1 border rounded px-3 py-2" placeholder="添加新待办..." /> <button onClick={addTodo} className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"> 添加 </button> </div> <ul className="space-y-2"> {todos.map(todo => ( <li key={todo.id} className="flex items-center gap-2 p-2 border-b"> <input type="checkbox" checked={todo.completed} onChange={() => toggleTodo(todo.id)} className="w-5 h-5" /> {editingId === todo.id ? ( <input type="text" value={editText} onChange={(e) => setEditText(e.target.value)} onBlur={() => saveEdit(todo.id)} onKeyPress={(e) => e.key === 'Enter' && saveEdit(todo.id)} className="flex-1 border rounded px-2 py-1" autoFocus /> ) : ( <span onDoubleClick={() => startEdit(todo)} className={`flex-1 ${todo.completed ? 'line-through text-gray-500' : ''}`} > {todo.text} </span> )} <button onClick={() => deleteTodo(todo.id)} className="text-red-500 hover:text-red-700"> 删除 </button> </li> ))} </ul> <div className="mt-4 text-sm text-gray-500">剩余 {remaining} 项未完成</div> </div> ); }; export default TodoApp;

整个过程约30分钟，代码质量极高，我只需要修改一处默认样式。

2.9 10个常见问题与解决方案

2.10 今日行动

1. 下载Cursor并登录。
2. 配置.cursorrules文件，写入你偏好的代码风格。
3. 用Cmd+K生成一个工具函数（如格式化日期）。
4. 用Cmd+L让AI解释一段你不熟悉的代码。
5. 完成待办应用实战，体验全流程。

下一章预告：GitHub Copilot vs Cursor vs Claude Code vs Windsurf——4大工具横向对比

第2章你学会了Cursor的基本操作。第3章我们来做一个横向对比，帮你选出最适合自己的AI编程工具。