# 2025-1-cursor **Repository Path**: ukSir/2025-1-cursor ## Basic Information - **Project Name**: 2025-1-cursor - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-01-01 - **Last Updated**: 2025-01-01 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 2025第一弹：3分钟带你使用Cursor生成新年祝福 ## 项目效果 ![PixPin_2025-01-01_09-40-02](readme.assets/PixPin_2025-01-01_09-40-02.gif) ## 项目简介 Cursor 是一个由 OpenAI 开发的 AI 写作助手，它可以帮助你快速生成文本、代码、图像等。这一次我们使用 Cursor 来生成一个新年祝福的动画，并使用 Vue 3 和 Vite 4 来实现。要求是不能编写任何代码，只使用 Cursor 来生成代码。 ## 下载cursor [下载地址](https://www.cursor.com/download/) ![image-20250101092847042](readme.assets/image-20250101092847042.png) ## 安装cursor 双击安装即可。然后会询问你是否要导入vscode相关的插件。你也可以直接把它看成vscode来使用。 ![image-20250101093040395](readme.assets/image-20250101093040395.png) ## 注册和登录 cursor的使用需要登录账号 你可以新注册账号，也可以使用谷歌或者github来快速登录 ![image-20250101092943941](readme.assets/image-20250101092943941.png) ## 新建空目录 ![image-20250101093241916](readme.assets/image-20250101093241916.png) 新建一个文件夹用来存放cursor创建的项目，使用cursor打开这个目录 ![image-20250101093334765](readme.assets/image-20250101093334765.png) ## 开始对话 输入 `ctrl I` 开始对话 对话窗口有三个模式 1. 正常对话 `chat` 2. 协作对话 `composer` - 根据你的需求 可以创建文件和修改代码 - 我们这里使用它 3. 发现bug `bug finde` 发现你项目中的bug和修复它 ![image-20250101093811793](readme.assets/image-20250101093811793.png) 这个是我使用的对话内容，多次对话后，可以得到完整的代码文件 1. 初始化 ``` 帮我使用vue3+vite+js+canvas 实现一个文字爆炸的网页应用 1 提供输入框，用来接收用户输入的内容 比如 “新年快乐” 2 提供 “开始” 按钮， 点击按钮的时候，结合上面的文字，实现文字的爆炸效果 3 尽可能将这个爆炸效果做得比较酷炫 ``` ![image-20250101094613912](readme.assets/image-20250101094613912.png) 2. 调整 ``` 你直接在当前项目 帮我补全vite相关的文件和配置， 这样我只需要输入 npm i 安装依赖， 然后启动项目即可 ``` ![image-20250101094624752](readme.assets/image-20250101094624752.png) 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. 调整 ``` 很好，但是在延迟时间内的文本 和 后续爆炸的效果有点 联系不上，效果像是割裂的。我希望能够直观看出来 就是这个文本 慢慢的发生爆炸 ``` ## 生成说明文档 我本来也想着使用它快速生成说明文档，但是感觉没有达到我的效果。应该也是我的问题。所以最后还是手动编写文档吧 ## 总结 以上就是一个简单的操作过程。 有更好的使用建议，希望可以留言。 最后祝愿大家新年快乐