Cursor:项目迁移神器

1、背景

1.1 项目迁移

公司有一个大的研发平台,是供应商开发的,其中有一个自研的功能模块需要独立出来。本身这个功能模块也是一个独立的前端项目,是通过模块联邦的方式去跟研发平台做的集成。技术栈使用的是vue3+vuecli+antdesign3,迁移出来技术栈变更为:vue3+vite+antdesign4

1.2 cursor能力

早就耳闻了cursor的能力,但我平时使用vscode+通义灵码较多,而且cursor收费,所以一直没用。那这次项目迁移的过程中,一定会遇到很多问题。最近又一直听说claude3.7模型写代码非常厉害,然后cursor也集成了这个模型,cursor有两周的pro版试用,正好趁这个机会试一试。

2、准备工作

有现成的框架vue3+vite+antdesign4,把原项目的核心代码拷贝到对应的目录中。重新调整页面路由,将项目运行起来。

3、cursor解决问题

调出cursor的聊天窗口,使用Agent模式,选择claude3.7模型,输入@键可以关联文件或目录。

3.1 批量修改api调用方法

新框架中的接口统一调用方法,跟原来的不同,需要统一修改,我修改了一个作为参考,剩余的交给cursor。

发送修改要求

cursor会修改代码,很快就改过来了。

其中有一个下载文件的接口,cursor还去读取了引入request方法的原方法,以及通用的下载文件的方法,然后给出了正确的修改。

文件修改后,文件下方会有接受和驳回的按钮"Accept File"和"Reject File",按照需求接受或驳回。

3.2 批量多文件修改模态框打开方法

因为从antdesign3升级到antdesign4,modal组件的使用方法发生了变化,页面报错:main.ts:17 Warning: [ant-design-vue: Modal] visible will be removed in next major version, please use open instead.

同样把需求发给cursor,此时加入整个目录作为上下文。

这样就批量修改了8个文件,其实这里应该是只需要修改为v-model:open,不需要将变量名也修改为open,但是这样改了也没什么问题,使用AI自动修改也不用担心它会漏修改的问题。

3.3 解决逻辑问题

因为我有两个页面用的是同一个组件,需要监听页面路由,来调用不同的接口,这里遇到了一些问题。

把问题描述发给cursor

cursor第一次没有解决问题,我继续,主要是需要将问题描述清楚。

这次cursor的修改完美解决了问题。

3.4 解决警告

项目运行中,在控制台有出现一些vue-warn的警告,遇到这些警告,我直接把警告内容发给cursor,等待它修复。

4、总结

Cursor的表现果然非常智能,在解决问题的过程中,如果引发的其他的问题,也会继续解决。个人感觉比通义灵码好用。 在整个项目迁移的过程中,我全程没有介入进行人工修改,全部都是跟cursor对话完成的。我的工作已经变成了发现问题,然后让AI解决问题。当然我这个项目代码量并不大,人工修改量也不大,但是使用AI的好处就是不用担心漏改和不小心打错变量的问题。

相关推荐
liaowenxiong11 天前
修改或禁用Cursor的全局搜索默认快捷键
cursor
励碼12 天前
如何在Cursor中使用MCP服务
cursor·mcp
树懒的梦想16 天前
调整vscode的插件安装位置
前端·cursor
袋鱼不重16 天前
Cursor 最简易上手体验:谷歌浏览器插件开发3s搞定!
前端·后端·cursor
海拥16 天前
《用Cursor和AI绘画24小时开发壁纸小程序》详细开发实录
微信小程序·cursor
沉默王贰16 天前
使用Cursor 打造了一款记账APP
ai编程·cursor·trae
demo007x16 天前
五、探索 Trae 技术 实现:codebase 与 build 模式深度融合
cursor·trae
Zuojiangtao17 天前
Cursor+MCP,AI时代前端开发工作流
前端·cursor·mcp
古时的风筝17 天前
Cursor 建议搭配 CursorRules 食用
前端·后端·cursor
Loadings17 天前
Claude Task Master (MCP) : AI驱动开发的新范式与AI编辑器集成实战
cursor·windsurf·cline