2025 第一弹：3 分钟带你使用 Cursor 生成新年祝福

2025 第一弹：3 分钟带你使用 Cursor 生成新年祝福

项目效果

项目简介

Cursor 是一个由 OpenAI 开发的 AI 写作助手，它可以帮助你快速生成文本、代码、图像等。这一次我们使用 Cursor 来生成一个新年祝福的动画，并使用 Vue 3 和 Vite 4 来实现。要求是不能编写任何代码，只使用 Cursor 来生成代码。

下载 cursor

下载地址

安装 cursor

双击安装即可。然后会询问你是否要导入 vscode 相关的插件。你也可以直接把它看成 vscode 来使用。

注册和登录

cursor 的使用需要登录账号

你可以新注册账号，也可以使用谷歌或者 github 来快速登录

新建空目录

新建一个文件夹用来存放 cursor 创建的项目，使用 cursor 打开这个目录

开始对话

输入 ctrl I 开始对话

对话窗口有三个模式

1. 正常对话 chat
2. 协作对话 composer - 根据你的需求 可以创建文件和修改代码 - 我们这里使用它
3. 发现 bug bug finde 发现你项目中的 bug 和修复它

这个是我使用的对话内容，多次对话后，可以得到完整的代码文件

1. 初始化

   帮我使用vue3+vite+js+canvas 实现一个文字爆炸的网页应用
   1 提供输入框，用来接收用户输入的内容  比如 “新年快乐”
   2 提供 “开始” 按钮， 点击按钮的时候，结合上面的文字，实现文字的爆炸效果
   3 尽可能将这个爆炸效果做得比较酷炫

   

2. 调整

   你直接在当前项目 帮我补全vite相关的文件和配置， 这样我只需要输入 npm i 安装依赖， 然后启动项目即可

   

3. 调整

   当点击 “开始爆炸” 的时候 页面出现报错了  Uncaught TypeError: Cannot read properties of undefined (reading 'getContext')
       at new TextParticleEffect (TextParticleEffect.js:33:29)
       at TextExplosion.vue:34:16
   

4. 调整

   帮我将文字爆炸的动画时间调慢一些，比如调整成5s爆炸完毕

5. 调整

   上述代码无效。 请检查你是否明确我的需求了。 或者是你提供的代码无效。请重新提供调整的代码

6. 调整

   上述代码有了初步效果，能否设置  要爆炸的文本。先显示1s，然后再开始爆炸。 因为现在看不出是哪个文本爆炸的

7. 调整

   很好，但是在延迟时间内的文本 和 后续爆炸的效果有点 联系不上，效果像是割裂的。我希望能够直观看出来 就是这个文本 慢慢的发生爆炸

生成说明文档

我本来也想着使用它快速生成说明文档，但是感觉没有达到我的效果。应该也是我的问题。所以最后还是手动编写文档吧

总结

以上就是一个简单的操作过程。 有更好的使用建议，希望可以留言。 最后祝愿大家新年快乐

代码链接