使用 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的官网地址是:vercel.com/

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

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

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

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

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

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

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

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

相关推荐
恋猫de小郭38 分钟前
Flutter Widget IDE 预览新进展,开始推进落地发布
android·前端·flutter
jingling5552 小时前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
Freedom风间7 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军7 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军7 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪8 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer8 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
山海上的风8 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发8 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
亭台烟雨中8 小时前
【前端记事】关于electron的入门使用
前端·javascript·electron