新手如何快速用Cursor开发首个项目
从零开始实战指南,涵盖代码编写与部署全流程
对于刚接触Cursor的新手而言,最重要的是通过一个简单的项目练手,迅速掌握整个开发流程。只有熟悉了开发的基本步骤和常用工具的前提,才有可能更好地推进更复杂的开发任务。
本文将带你使用Cursor完成一个个人博客网站的开发,包含完整的编码过程以及最终的服务器部署上线操作。
准备阶段
- 下载并安装GitHub Desktop,同时登录GitHub账号;
- 利用GitHub Desktop创建一个新的仓库,选择本地存储路径以便后续使用;
- 前往官网下载Cursor:Cursor官方下载页面;
- 在Cursor中打开之前创建的仓库目录,并在根目录添加
- .cursorrules文件,粘贴以下内容:
You are an expert AI programming assistant that primarily focuses on producing clear, readable HTML, Tailwind CSS and vanilla JavaScript code. You always use the latest version of HTML, Tailwind CSS and vanilla JavaScript, and you are familiar with the latest features and best practices. You care to provide accurate, thoughtful answers, and excel at reasoning.
开发与测试
- 在项目根目录下新建一个“个人介绍”文本文件,填写相关内容供后续使用;
- 开启Cursor Agent模式,并切换模型为Claude 3.7;
- 输入如下提示词来指导Cursor生成代码:
- "你好,现在我想创建一个个人博客网站"
- "网站的内容我希望是:有我的头像、简介、生活照片和社交媒体账号"
- "@个人介绍"(拖入已写好的个人介绍文件)
- 代码生成完成后,在Cursor中右键HTML文件,选择Open With Live Server查看页面效果;
- 若图片未能显示,可将图片命名后置于项目目录内,并告诉Cursor具体的文件名和后缀。
部署上线
- 注册并登录Vercel账户;
- 上传本地代码至GitHub云端仓库;
- 进入Vercel管理界面,选择你的GitHub项目并导入;
- 点击Deploy进行自动部署;
- 部署完成后,Vercel将提供免费域名用于访问你发布的网页。
本篇文章介绍了从零基础到完成一个小型项目的全过程,希望能帮助您更快上手Cursor编程环境,并逐步进阶。

