一、背景

起因是公司最近在弄项目的备案，然后产品那边需要一些页面截图以及对应的数据库表截图（有些页面缺少实际开发需要临时提供），这活交给我，但我是个纯粹的后端啊，前端或UI咱也是半吊子，总不能学习下再来开发吧。

诶，这个时候AI编程就起到关键作用了~

早就听说Cursor的大名，这次我就用Cursor的AI编程全自动地帮我生成前端项目，并且后续的部署用到了免费的Cloudflare来实现！

二、Cursor生成前端项目

第一次用Cursor的兄弟，可以选择直接询问AI（编程方面ChatGPT我觉得是最好用的），让AI协助我们快速上手Cursor

1.安装Cursor

Downloads | Cursor - The AI Code Editor

官网，选择windows版本下载安装即可

免费版有试用额度，网上有一些破解的方法，可以参考

全网最新免费使用Cursor教程_Cursor免费使用-CSDN博客

2.基础环境

1. Node 18+，我这里用的是v22.16.0
2. 包管理器：pnpm

3.初始化项目

打开项目所在文件夹，cmd，执行如下命令

pnpm create vite@latest review-admin --template react-ts
cd review-admin
pnpm i antd @ant-design/icons react-router-dom axios zustand dayjs
pnpm i -D @types/node

4.搭建“骨架”

在Cursor里打开项目根目录，然后打开ai聊天框，如下：

然后把下方的提示词粘贴进去

Prompt（直接贴给 Cursor）：
用 TypeScript + React + Vite 搭一个“人工审核管理后台”。用 Ant Design 做 UI，React Router 做路由，Zustand 做全局状态，Axios 做 API 封装，目录结构如下，并生成基础文件与样例页面：

src/
  main.tsx
  app.tsx
  router/
    index.tsx
  pages/
    login/index.tsx
    dashboard/index.tsx
    review/
      queue.tsx
      detail.tsx
      history.tsx
  components/
    Layout/
      AppLayout.tsx
  store/
    auth.ts
    settings.ts
  api/
    client.ts
    review.ts
  types/
    review.ts

要求：

1. 登录页（模拟登录，拿到 token 与角色 role：reviewer/admin）。
2. 顶栏+侧边栏布局，基于角色控制菜单显示。
3. 审核队列页：表格含筛选（状态、时间范围、来源）、分页、批量操作（通过/拒绝）、单条操作、跳转详情。
4. 详情页：展示待审内容、上下文、风险标签；提供通过/拒绝（带理由）操作；支持快捷键（A/D）。
5. 历史记录页：可按审核人、时间、结果查询。
6. api/client.ts 封装 axios（基地址、token 拦截器、错误提示），api/review.ts 提供 listTasks, getTask, approveTask, rejectTask。
7. types/review.ts 定义 ReviewTask、ReviewResult 等类型。
8. 先使用 本地 mock 实现 API（建议用数组 + setTimeout 模拟），后续我会切换到后端接口。
9. 所有页面写出可运行最小版本（能跑起来、能操作），中文文案。

如下图所示：

小技巧：生成的代码可能会有报错，报错的话只要鼠标移到爆红处，然后根据提示点击修复，或者直接在聊天框说修复报错，AI就会自动帮你修正错误（这一点后面会经常用到）

5.运行与调试

pnpm dev

浏览器打开 http://localhost:5173，如下图所示：

期间遇到的问题都可以通过询问AI聊天窗来解决，如我一开始遇到样式问题，就通过AI解决了，如图所示（分析出问题后，会弹出一个确实的选项，只需要根据提示点勾选，AI就会自动修改对应文件）：

拓展

如果你需要进一步完善项目，比如说加一个页面，并且如果你手头有UI设计图，也可以直接通过聊天框一同上传给AI，如下图所示：

我给到的图：

Cursor生成的页面：

三、部署项目

当我们项目调试好后，想要提供地址给别人看，那就要考虑怎么部署了

1.打包

打包这里我也直接用AI替我们做了，并且中途遇到的报错也能顺便帮我们解决，如图所示：

2.部署

• 如果对方的电脑安装了Node.js 环境，那么可以直接通过如下命令运行

  # 安装 serve
  npm install -g serve
  
  # 在 dist 文件夹中运行
  cd dist
  serve -s .
  

• Cloudflare部署

  如果对方没有Node.js环境，这里我推荐一个可以免费部署前端项目的平台——Cloudflare

  **官网：**https://dash.cloudflare.com/

  部署步骤

  1. 注册账号，选择免费计划

  2. 把项目push到 GitHub

  3. 在 Cloudflare Pages 新建项目

     

     这里注意要先绑定GitHub账号（Connect to Git）

  4. 配置构建设置

     Framework preset: 选对应框架（Vue、React、Vite 等），如果只是纯静态 dist，选 None。

     Build command:

     • 如果代码里有源码 → npm run build
     • 如果你已经在本地打包好，只想上传 dist，可以留空（或者设置成 echo "skip build"）。

     Build output directory: 填 dist

     

  5. 部署

     点击 Save and Deploy
     Cloudflare 会自动拉取代码，执行构建，然后部署到一个免费的 .pages.dev 域名

     另一种方式：直接上传 dist（不用 GitHub）

     如果你已经有 dist，不想走 GitHub：

     1. 在 Cloudflare Pages → Upload assets
     2. 直接把 dist 文件夹拖进去上传
     3. 也能得到一个 .pages.dev 域名

     如下图就是部署好的项目域名，别人通过它就可以访问到你的项目了！

     

四、结语

AI刚出来那会，大部分程序员对其都还是很轻视的，觉得根本替代不了“会手敲代码的高手”

但是随着AI逐渐发展完善，真正体验下来其实真的大部分时候比手撸代码要提升好几倍甚至数十倍的效率，在不久的将来替代只会增删改查的初级程序员已经是必定的趋势了

不过我们也不用太焦虑，技术是永远不断在更新换代的，我们要学会适应它，接纳它，掌握它，只要你也不断进步，就永远不会被替代。