Cursor项目实践

接下来我们将使用cursor创建一个CURD的应用,它使用next.js作为前端,虽然我们不懂next.js代码,但是完全可以使用prompt的方式来构建完成。

next.js介绍

Next.js是一个基于React的全栈开发框架,大大简化了React应用的开发流程,是现代Web开发的理想选择。它提供了许多开箱即用的功能:

https://nextjs.org/

image-20241223221400530

创建Next.js应用

在cursor中新建一个项目,打开terminal,执行以下命令:

npx create-next-app@latest

image-20241223222117514

所有选项均保持默认,一路回车。创建完成后目录如下:

image-20241223222148260

运行app:

cd curd-app
npm run dev

image-20241223222407653

npm run dev对应的命令如下:

image-20241223222609177

访问本地3000端口,查看应用页面:

image-20241223222518698

添加按钮

page.tsx页面添加一个按钮,用于跳转到/dashboards页面:

image-20241223223012452

生成完代码后,点击Apply。 Apply完后,实时检查浏览器,发现多了一个Manage API Keys按钮:

image-20241223223030381

它还会问是否帮创建/dashboards的基本页面,回答帮我创建,然后将代码应用到项目:

image-20241223223125177

但是这个路径要调整下,放到curd-app/app/dahsboards/page.tsx:

image-20241223223643662

回到浏览器,点击Manage API keys会跳转到新的页面,cursor生成的代码已经创建好基本的页面组件:

image-20241223223234574

还可以继续与cursor交互,生成其他的功能:

image-20241223223302079

这里先不继续生成,留到下一节。