《AI辅助前端开发:工具安装篇》
先回答一个高频问题:三款工具都要装吗?
我的建议是:都要装。因为它们的定位不同,日常开发中需要组合使用。打个比方:
-
Cursor = 你的“主战场”(写项目的主力)
-
Claude Code = 你的“外脑”(遇到难题时召唤)
-
Copilot = 你的“双手”(打字时的自动补全)
如果你实在想简化,最少也要装 Cursor + Claude Code 这两个。
第一步:安装Cursor(主力编辑器)
Cursor是什么?
-
一款基于VS Code改造的AI编辑器
-
最大的特点:能“看懂”你整个项目,不只是当前打开的文件
-
免费版足够日常使用(有使用次数限制,但基本够用)
安装步骤:
① 下载安装包
打开浏览器,访问 Cursor 官网:https://cursor.sh
点击页面上的 “Download” 按钮,选择你的操作系统:
-
Windows:下载
.exe文件 -
macOS:下载
.dmg文件(Apple Silicon 和 Intel 版本别选错) -
Linux:下载
.AppImage或.deb
💡 小白的困惑:怎么判断我的Mac是Apple Silicon还是Intel?
点击屏幕左上角苹果图标 → 关于本机 → 看“芯片”一栏,如果是“Apple M1/M2/M3”就是Apple Silicon,如果是“Intel”就是Intel。
② 安装
-
Windows:双击
.exe,一路点“下一步”,建议安装路径保持默认。 -
macOS:双击
.dmg,把 Cursor 图标拖进 Applications 文件夹。 -
Linux:给
.AppImage文件添加执行权限后双击运行。
③ 首次启动配置
打开 Cursor 后,它会问你是否导入 VS Code 配置。如果你是小白(没有用过VS Code),选 “跳过” 即可。
然后会看到一个欢迎页面,先关掉它(后面我们会重新打开)。
④ 登录账号(重要)
点击左下角的齿轮图标(设置)→ 点击 “Sign In” → 用 GitHub 或 Google 账号登录。
⚠️ 为什么必须登录:Cursor 的AI功能需要联网认证,不登录的话AI无法使用。
⑤ 设置为中文界面(可选)
如果英文看着不习惯:
-
按
Ctrl+Shift+P(Mac:Cmd+Shift+P) -
输入
Configure Display Language -
选择
Install additional languages... -
搜索 “Chinese (Simplified)” 并安装
-
重启 Cursor
⑥ 验证AI功能是否正常
打开一个新的文件(Ctrl+N / Cmd+N),输入 // 写一个Hello World,然后按 Ctrl+K(Mac:Cmd+K)。
如果AI给你生成了代码,说明安装成功 ✅
2.4 第二步:安装Claude Code(AI顾问)
Claude Code是什么?
-
Anthropic公司(Claude的母公司)推出的AI编程工具
-
可以直接在终端里运行,也可以作为独立应用
-
最强能力:理解超大上下文(可以一次性读上万行代码)
-
目前还是Beta阶段,完全免费
安装步骤:
① 注册Claude账号
访问 https://claude.ai,用邮箱注册账号(推荐用Google/Gmail一键登录)。
⚠️ 注意:Claude目前在某些地区可能访问受限,如果打不开,请自行解决网络问题(懂的都懂)。
② 下载Claude Code桌面应用
访问 https://claude.ai/code(这个链接可能需要从Claude官网首页的导航栏找到“Claude Code”入口)。
目前支持:
-
macOS:下载
.dmg -
Windows:下载
.exe安装包 -
也支持通过
npm install -g @anthropic/claude-code命令行安装(稍复杂,不推荐小白)
③ 安装并登录
-
双击安装,完成后打开应用
-
使用你在步骤①注册的账号登录
-
登录后应该能看到一个空白的对话界面
④ 验证功能
在Claude Code的输入框中输入:“请用JavaScript写一个冒泡排序。”
如果能正常输出代码,说明安装成功 ✅
⑤ (可选)配置终端命令
如果你希望在任何目录下都能快速唤起Claude Code(高级玩法,第5篇会用到),可以:
-
打开终端(Terminal)
-
执行:
npm install -g @anthropic/claude-code -
然后在终端输入
claude即可启动
💡 这一步对小白来说可做可不做,前期用桌面应用就足够了。
2.5 第三步:安装GitHub Copilot(自动补全助手)
GitHub Copilot是什么?
-
GitHub和OpenAI联合推出的AI代码补全工具
-
写代码时自动给你“猜”下一行是什么
-
注意:这是付费工具(约10美元/月),但有免费试用
💡 小白建议:如果你是学生,可以用GitHub学生包 免费 获取Copilot。如果你暂时不想付费,可以先跳过这一步,只用Cursor和Claude Code也够用。
安装步骤:
① 开通Copilot服务
访问 https://github.com/settings/copilot(需要登录GitHub账号)。
点击 “Start free trial” 开始免费试用(一般有30-60天),绑定支付方式后即可开通。
⚠️ 试用期结束前记得取消订阅,否则会自动扣费。
② 在Cursor中安装Copilot插件
因为Cursor基于VS Code,所以可以直接安装VS Code的插件:
-
打开Cursor
-
点击左侧边栏的“扩展”图标(四个方块)
-
搜索 “GitHub Copilot”
-
点击 “安装”
-
安装完成后,右下角会提示你登录GitHub账号
-
按照提示完成登录授权
③ 验证功能
在Cursor中新建一个文件,输入 // 定义一个计算数组总和的函数,然后换行。
如果Copilot自动给出了灰色的代码提示(按 Tab 键即可接受),说明安装成功 ✅
2.6 常见安装问题排查(小白必看)
问题1:Cursor登录失败 / AI不响应
-
检查网络(可能需要科学上网环境)
-
检查是否使用了最新版本(官网重新下载)
-
尝试退出账号重新登录
问题2:Claude Code提示“Region not supported”
-
Claude Code可能对部分地区有限制,使用网络代理切换到支持的地区(如美国、日本等)
问题3:Copilot提示“No Copilot license found”
-
确认GitHub账号已开通Copilot服务
-
在Cursor中按
Ctrl+Shift+P,输入 “Copilot: Sign in” 重新登录
问题4:电脑配置太低跑不动?
-
Cursor和Copilot对配置要求不高,4GB内存以上即可
-
Claude Code桌面应用略吃资源,如果卡顿可以只用网页版
claude.ai
2.7 环境配置清单(验收标准)
做完以上三步,你的电脑应该具备以下能力:
| 检查项 | 如何验证 |
|---|---|
| ✅ Cursor能生成代码 | 新建文件,按 Ctrl+K,AI给出回复 |
| ✅ Claude Code能对话 | 提问“写一个Vue组件”,得到正确代码 |
| ✅ Copilot能自动补全 | 写代码时有灰色的AI提示 |
| ✅ 三款工具均已登录 | 都显示已登录状态 |
如果以上四项全部打勾,恭喜你,环境搭建完成!🎉
2.8 本篇小结
-
Cursor是主力编辑器,先去官网下载并登录
-
Claude Code是AI顾问,安装桌面应用即可
-
Copilot是自动补全工具,有预算/学生身份再装
-
所有工具都依赖网络环境,请确保能正常访问外网
-
安装完成后务必逐个验证功能是否正常
下篇预告:工具装好了,但怎么跟AI“说话”它才听得懂?第3篇我们讲 提示词基础 —— 这是整个系列最核心的技能,学会了事半功倍。
更多推荐




所有评论(0)