当前位置：首页 > backend >正文

30分钟入门实战速成Cursor IDE（2）

backend 2025/8/30 10:29:37

我是后端程序员，我想做个体，前端必不可少，前端可替代性很高，但是前端变现能力比后端要方便一些。OK，回到Cursor IDE 让其帮我们实现一个前端的例子。

先说一句想一步到位的直接让克瑟写一个“哈喽我的”html页面就实战结束了。因为我后期要做小程序多端APP所以我先从ts入手。OK 我们开始吧。

使用 TypeScript 来构建这个前端计算器项目，提示词可以直接复制拿去用。

先上个效果页面截图
在这里插入图片描述

为什么选择 TypeScript？

Java 程序员友好： TypeScript 是 JavaScript 的超集，它添加了静态类型系统。这非常像 Java，我们可以在变量、函数参数和返回值上声明类型（如 number, string, boolean），这能帮我们及早发现错误，代码也更易读、更易维护。
现代前端标准： TypeScript 是当前大型和复杂前端项目的主流选择，生态非常成熟。
与 Cursor 的 AI 完美结合： 静态类型为 Cursor 的 AI 提供了更丰富的上下文信息，能生成更准确、更可靠的代码建议和补全。
最终运行在浏览器： 编译后就是纯 JavaScript，能在任何浏览器运行。

我们将使用最简单的静态文件方式（HTML + CSS + TypeScript），不引入复杂的框架（如 React/Vue），专注于学习 TypeScript 和 Cursor 的 AI 功能。

第1步：创建项目结构 (2分钟)

打开 Cursor。
File -> New Folder -> 选择一个位置，命名为 simple-calculator -> 点击 Create。
在 Cursor 中打开这个文件夹。
在项目根目录下，创建以下文件和文件夹：
- index.html (主页面)
- style.css (样式)
- script.ts (我们的 TypeScript 代码)
- 创建一个文件夹 dist (用于存放编译后的 JavaScript)

第2步：编写 HTML 结构 (5分钟)

打开 index.html。
按下 Cmd + L 打开 AI 聊天。
输入以下指令：

“创建一个简单的计算器网页的 HTML 结构。需要一个显示屏幕（display），和一个包含数字 0-9、运算符（+、-、*、/）、等号 (=) 和清除 © 按钮的按钮网格。使用语义化的 HTML 标签。在 <head> 中引入 style.css 和最终的 dist/script.js。”
发送请求。

AI 会生成类似以下结构的代码（它会自动引入 CSS 和 JS）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Simple Calculator</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="calculator"><input type="text" id="display" disabled><div class="buttons"><button onclick="clearDisplay()">C</button><button onclick="appendOperator('/')">/</button><button onclick="appendOperator('*')">*</button><button onclick="appendOperator('-')">-</button><button onclick="appendNumber('7')">7</button><button onclick="appendNumber('8')">8</button><button onclick="appendNumber('9')">9</button><button onclick="appendOperator('+')">+</button><button onclick="appendNumber('4')">4</button><button onclick="appendNumber('5')">5</button><button onclick="appendNumber('6')">6</button><button onclick="appendNumber('1')">1</button><button onclick="appendNumber('2')">2</button><button onclick="appendNumber('3')">3</button><button onclick="calculate()" class="equals">=</button><button onclick="appendNumber('0')" class="zero">0</button><button onclick="appendDecimal()">.</button></div></div><script src="dist/script.js"></script>
</body>
</html>

重要： 点击 AI 建议的 “Accept” 或 “Insert” 按钮，让 Cursor 自动填充 index.html 文件。

第3步：编写 CSS 样式 (5分钟)

打开 style.css。
按下 Cmd + L。
输入指令：

“为上面的计算器 HTML 添加美观的 CSS 样式。让计算器居中，有圆角边框，背景色为浅灰色。按钮网格使用 CSS Grid 布局。按钮有圆角，悬停时有阴影效果。‘C’ 和 ‘=’ 按钮可以是不同颜色（比如红色和绿色）。显示屏幕有内边距和边框。整体风格简洁现代。”
发送请求。
AI 会生成相应的 CSS 代码（可能包含 :hover 效果、border-radius、box-shadow 等）。
审阅后，点击 “Accept” 让 AI 填充 style.css。

第4步：编写 TypeScript 逻辑 (AI 核心 - 10分钟)

这才是最能体现 Cursor AI 强大的地方。

打开 script.ts。
我们的目标是实现 clearDisplay, appendNumber, appendOperator, appendDecimal, calculate 这些函数。
按下 Cmd + L。
输入一个非常具体的指令，这是关键：
"用 TypeScript 编写一个计算器的逻辑。定义一个类 Calculator，它有一个私有属性 displayValue (类型为 string，初始值 ‘0’)。实现以下方法：
- clearDisplay(): 将 displayValue 重置为 ‘0’。
- appendNumber(num: string): 将数字追加到 displayValue。如果当前是 ‘0’，则替换为 num（而不是变成 ‘01’）。需要处理小数点逻辑（但主要在 appendDecimal 处理）。
- appendOperator(op: string): 追加运算符。需要确保不会连续输入多个运算符（比如 1++），并且处理以 ‘-’ 开头的情况。
- appendDecimal(): 追加小数点。确保当前数字部分没有小数点。
- calculate(): 使用 eval() 计算 displayValue 的值（注意：eval 在生产环境有安全风险，但这里为简单演示）。将结果显示在屏幕上。如果出错（如除零），显示 ‘Error’。
- 实现一个 updateDisplay() 方法，将 displayValue 的值更新到 id 为 ‘display’ 的 HTML 输入框。
- 在类外部，实例化 Calculator 对象，并确保 HTML 按钮调用的是这个实例的方法。"
发送请求。
这是关键一步： AI 会生成一大段 TypeScript 代码。请务必仔细阅读和理解它，特别是类型声明 (private displayValue: string = '0';) 和方法签名。这和 Java 的类、方法、类型非常相似。
如果代码看起来合理，点击 “Accept” 填充 script.ts。AI 会处理 DOM 操作 (document.getElementById) 和事件绑定。

第5步：编译与运行 (3分钟)

TypeScript 需要编译成 JavaScript 才能在浏览器运行。

安装 TypeScript 编译器 (如果还没装):
- 打开 Cursor 内置终端 (Cmd + `` )。
- 运行：npm install -g typescript (需要先安装 Node.js，前端开发基础)
初始化 TypeScript 配置 (可选但推荐):
- 在终端运行：tsc --init。这会生成 tsconfig.json，告诉编译器如何工作。
编译代码:
- 在终端运行：tsc script.ts --outDir dist
- 这会将 script.ts 编译成 dist/script.js。
打开网页:
- 找到 index.html，右键选择 “Open with Live Server” (如果装了 Live Server 插件) 或者直接用浏览器打开 index.html 文件。
测试计算器！ 点击按钮，看看是否能正常工作。

总结与给 Java 程序员的提示

成功！ 用 Cursor 的 AI 帮助，快速创建了一个 TypeScript 前端项目。
TypeScript = JavaScript + Types: 把它想象成 “有类型的 JavaScript”。声明变量是 number 还是 string，就像在 Java 里声明 int 或 String。
AI 是助手，不是替代： 生成的代码是起点。需要理解它，调试它（比如 eval 可能出错），并根据需要修改。
继续探索： 尝试让 AI 帮忙添加更多功能，比如百分比、正负切换，或者改用更安全的计算方式代替 eval。
Cursor Pro: 免费版可能限制 AI 使用次数或速度。如果觉得好用，Pro 版能提供更流畅的体验。