程序员私藏的AI代码神器Cursor之composer功能从零创建一个前端工程页面

Cursor他是一个开源的AI编程编辑器。开源地址目前在国内是可以不需要其他东西，可以之间访问的，支持多种语言。

Cursor是一个为Al编程而做的编辑器。它还处于早期阶段，但现在Cursor可以帮助你做一些事情。编写：使用Copilot更聪明的人工智能生成10-100行代码比较文件的差异：让ai编辑一段代码，只看建议的修改chat：chatgpt风格的界面，了解您的当前文件以及更多：要求修复

什么是Cursor？

官网：https://www.cursor.com/

看官网接受大家应该就知道是什么东西了，他是一个开源的AI编程编辑器。

下面是官方的介绍：

Cursor是一个为Al编程而做的编辑器。它还处于早期阶段，但现在Cursor可以帮助你做一些事情。

编写：使用Copilot更聪明的人工智能生成10-100行代码

比较文件的差异：让ai编辑一段代码，只看建议的修改

chat：chatgpt风格的界面，了解您的当前文件

以及更多：要求修复lint错误，生成测试/评论，等等。

使用

Cursor 提供了两种人机对话方式。一种是 Chat，它与 ChatGPT 之类的工具差别不大。另一种则是强大的 Composer。

上一篇讲过chat功能，链接如下：

程序员私藏的AI代码神器Cursor,自从使用了Cursor工作效率飞起

这篇主要来说说composer功能

composer功能

在编写程序时，我们可能会遇到一个文件被其他文件调用的情况。如果使用 Chat，它所理解的内容仅限于当前文件，无法跨文件理解，因此不能完整地把握文件之间的调用关系等。而如果使用 Composer，就可以让 Cursor 同时理解多个文件。 

在composer里输入：

请使用如下技术帮我生成一个菜谱的前端网页 vue  elmentui

会自动生成一些列文件，点击accept接受

有依赖安装就点run自动安装，发现package.json不完善，不能运行

输入：不能运行，修复packge.json

有什么问题可以直接给他，根据提示进行操作即可

这是自动创建的工程目录：

最后运行npm run serve

运行成功的界面，根据需求可以继续完善！ 

跟文件聊

选中某个文件如RecipeList.vue，输入：帮我添加一个三明治的菜谱

会自动在该文件中添加三明治的数据。

最后

简介单单一个工程就出来了。不要太高效。阅读原文 获取更多干货