用Cursor+React快速搭建个人接单网站：支持在线报价与自动邮箱通知

你好，我是RD！这期教你在完全不懂React生态的前提下，用Cursor的AI能力，从空白文件夹到拥有「在线报价+自动邮件提醒」的个人接单网站——全程可视化操作，无命令行恐惧。

> ✅ 最终效果：单页网站（首页+服务介绍+在线表单），客户填完需求，你手机/邮箱立刻收到通知，报价响应速度提升5倍。

---

🧰 前置准备（3分钟）

安装 [Cursor](https://cursor.sh)（推荐下载「Stable」版，Windows/macOS均支持）

注册 [EmailJS](https://www.emailjs.com/) 免费账号（支持100封/月，够副业起步）

- 进入 Dashboard → Add Email Service → 选「Gmail」→ 按指引授权（无需SMTP密码）
- 记下：Service ID、Template ID、Public Key（后面全用得上）

---

🚀 第一步：用Cursor新建React项目（2分钟）

打开Cursor → Cmd/Ctrl + Shift + P → 输入「Create New Project」→ 回车

选择「React (Vite)」模板 → 命名 my-freelance-site → 确认创建

等待初始化完成（约10秒），左侧文件树展开 src/

---

💬 第二步：让Cursor写首页（5分钟）

右键 src/App.jsx → 「Ask Cursor」→ 输入：

   你是一个全栈React工程师。请重写App.jsx，实现一个极简接单页：
   - 顶部导航栏：Logo文字「CodeWithRD」
   - 主体：3个服务卡片（网站搭建｜AI工具定制｜小程序开发），每张卡含标题+短描述+价格（¥800起）
   - 底部表单：姓名、邮箱、需求描述（textarea）、提交按钮
   - 提交时显示「发送中...」，成功后显示绿色Toast「感谢留言，2小时内回复！」
   - 使用Tailwind CSS类（已预装），不要引入额外库
   

点击「Run」→ 替换整个 App.jsx 内容

终端输入 npm run dev → 浏览器打开 http://localhost:5173，确认页面渲染正常

---

📨 第三步：接入EmailJS自动通知（4分钟）

在 src/ 下新建 emailjs-config.js，粘贴：

   export const EMAILJS_CONFIG = {
     publicKey: 'YOUR_PUBLIC_KEY',
     serviceId: 'YOUR_SERVICE_ID',
     templateId: 'YOUR_TEMPLATE_ID'
   };
   

（把上面记下的3个值填进去）

修改 App.jsx，在顶部加：

   import emailjs from '@emailjs/browser';
   import { EMAILJS_CONFIG } from './emailjs-config.js';
   

找到表单提交函数（类似 handleSubmit），替换为：

   const handleSubmit = async (e) => {
     e.preventDefault();
     const formData = new FormData(e.target);
     try {
       await emailjs.send(
         EMAILJS_CONFIG.serviceId,
         EMAILJS_CONFIG.templateId,
         {
           from_name: formData.get('name'),
           from_email: formData.get('email'),
           message: formData.get('message')
         },
         EMAILJS_CONFIG.publicKey
       );
       alert('感谢留言，2小时内回复！');
     } catch (err) {
       alert('发送失败，请重试');
     }
   };
   

---

🌐 第四步：一键部署上线（1分钟）

终端运行：npm run build（生成 dist/ 文件夹）

打开 [Vercel](https://vercel.com) → 登录GitHub → 新建Project → 选 my-freelance-site → 默认设置 → Deploy

2分钟后获得专属域名（如 my-freelance-site.vercel.app）

> ✅ 验证：用朋友邮箱提交表单 → 查收你的邮箱，看是否收到通知邮件

---

📈 副业冷启动建议

把Vercel链接发到知乎「前端副业」话题下，附一句：“用AI搭的接单站，源码开源，欢迎提PR”（建立信任）

在表单下方加小字：“填写即授权我们用AI优化您的需求文档（可随时撤回）”——降低用户顾虑

后续用Cursor「Ask」功能：「把报价模块改成滑块动态计算（网站搭建×1.2，AI定制×1.5）」，1分钟升级

---

✅ 为什么推荐Cursor而非VS Code？

内置AI理解上下文：它知道你刚建的是Vite项目，自动用import而非require

错误实时修复：提交报错时，右键「Explain Error」→「Fix this」秒解决

无学习成本：所有操作在GUI完成，拒绝终端黑屏焦虑

你现在拥有的不是一个网站，而是一个可无限复制的副业原子单元。

下期实战：《用AI把客户聊天记录自动转成技术方案PDF（Python+LangChain）》

行动指令：现在就打开Cursor，新建项目，敲下第一个npm run dev。

---

📌 工具链：Cursor（开发）→ EmailJS（通知）→ Vercel（托管）→ 微信/知乎（获客）