Cursor+Vercel快速开发应用

type

status

date

slug

summary

使用 Cursor + Vercel 从 0 开发、上线一个网站，新手小白也可以操作

原创极客枫哥【公众号】

最近看到一个很火的 AI 对话代码编辑器 cursor ，体验了一下，觉得还是很不错的，对于不懂编程的人来说，可以利用这个工具实现一些自己想要的简单的网页。

这篇文章我们就结合一个实际的案例，和大家一起从 0 开发、上线一个网站。

我们要做的是一个待办事项的清单，首先新建一个 todoList 的目录，然后使用 cursor 打开。

在 mac 中唤起 AI 对话的快捷键是 Command + L 。

我们输入以下内容，先让 AI 帮我创建一个 html 页面。

貌似没有自动帮我创建 index.html ，那我手动新建一个文件，然后把生成的代码复制进去。

然后直接使用浏览器打开这个 html 文件，预览一下，效果还真不错。

测试了一下，功能也是可以正常使用的，添加 todo 项，完成 todo 项都是没问题的。

但是我觉得这个页面太素了，我们尝试让 cursor 来对它做一些美化。

选中 index.html ，然后唤起对话，输入对应的美化提示词，待 AI 输出完成后，点击右侧的 Apply 按钮，就可以查看修改的内容，如果没有问题的话，可以再点击 Accept 接收修改。

我们再来查看一下美化后的页面，这样就舒服多了。

但是我发现一个小问题，添加 todo 项的时候只能点击"添加"按钮，最好能支持回车事件，我们再来给 cursor 提需求，看看效果如何。

同样的，我们接收代码后，再来看看效果。测试了下，确实已经支持回车事件了。

有添加 todo，那么最好还能支持删除，继续对话。

经过测试，删除功能也是可以正常使用的，但是"完成"和"删除"两个按钮的配色是一样的，我们再来调整一下。

再来看一下实现的效果

现在基本功能已经完成了，但是如果我操作后，一刷新浏览器，那么内容就不见了，因为我们没有保存数据。

我们继续对话 cursor ，让它使用浏览器自带的 localStorage 来存储我们操作的数据。

接收代码，再来测试一下，非常完美，刷新后内容依然存在。

最后我们如何把开发好的功能可以让所有人使用呢？我们可以利用 Vercel 来快速部署我们的网页。

Vercel 的官网地址是：https://vercel.com/。

我们进入网站，然后登录，通常可以使用 github 账号直接登录。

然后我们在 github 中新建一个名为 todoList 的仓库

接着把我们写好的 index.html 直接提交到这个仓库中。

然后回到 Vercel 中，添加一个新的项目

然后找到 todoList 的仓库，点击右侧的 import 按钮

点击 Deploy ，如果能看到下面这个页面，就说明部署成功了

回到项目的看板，可以看到这里有一个 Domains 的字段，我们点击这个地址就可以在线访问到我们的网页了，非常完美。

这里我也贴一下我的地址吧，大家有兴趣可以去测试玩玩，https://todo-list-sigma-five-76.vercel.app/