课程: Cursor 基础知识
免费学习该课程!
今天就开通帐号,25,600 门业界名师课程任您挑!
Cursor 快速上手
这节课我来带你快速上手一下Cursor 我们选择打开一个项目 我找一个位置 在这里面新建一个文件夹 Cursor写的该项目的代码 都将放到这个文件夹里 一般编程课的第一节课 都会写一个hello world 今天我们换一个花样 我们写一个hello Google 一起Vibe Coding一个谷歌的首页 我们来到Cursor 这里有一个对话框 我们可以直接在这里面写提示词 让它生成一个类似谷歌首页的网站 为了更加准确 我可以直接截一个图给它 然后我们粘贴到对话框当中 点击可以查看一下这张图片 我们接着写提示词 用户点击搜索框可以输入文字 按回车 可以搜索内容跳转到真实的谷歌搜索 在下边我们可以选择模型 默认的是自动 我们可以把自动取消 在下边可以看到有非常多的模型 但是由于我们现在是试用版 可选择的模型不多 所以我们还是使用Auto模式 接下来我们把提示词发送给Cursor 它就开始给我们写代码了 可以看到 它已经开始创建了一个html文件 现在在创建另一个文件 我们可以来到右上角 点击开启左侧栏 在这里我们可以看到 它已经创建了三个文件 如果我们要想查看这个网页的效果 我们可以找到这个Index.html文件 然后右键Reveal in Finder 在文件夹当中显示 我们双击可以将它打开 可以看到这是一个本地文件 接下来我们就来到搜索框 来输入一些内容 比如我就试着搜索Cursor吧 按一下回车 可以看到 它已经自动的跳转到了谷歌搜索 这是真实的谷歌搜索的页面 我们可以返回一下 这里有一个小瑕疵 这里出现了一个美元符号 我不想要它 所以我可以截图 然后回到Cursor 把截图粘贴给它 然后写提示词 让它帮我把这个dollar的icon给我去掉 Cursor就会立刻检查相关的代码 并且将这个美元的符号给它去掉 如果你可以读懂代码 你可以查看左侧栏当中的文件 查看它是如何修改相关的代码的 现在Cursor已经完成了任务 可以看到 它同时修改了3个文件的内容 我们可以点击keep all 一键接受它所有的修改 我们回到浏览器刷新一下 可以看到这个美元的符号就消失了 接下来 我想再添加一个鼠标的交互功能 当鼠标划过的时候 我想让它随机的出现一些emoji 鼠标不动的时候逐渐的消失 我们就提交一下 可以看到Cursor又开始疯狂的写代码了 现在它已经写了非常多的代码…