准备工作

下载安装

在官网注册账号。最好使用浏览器的无痕模式：

需要用邮箱进行注册，Cursor 免费账号的使用有额度限制，因此这里推荐使用 Gmail 邮箱，因为 Gmail 邮箱的投递规则比较宽泛，如果你的 Gmail 邮箱是 abc@gmail.com，就可以用 abc@gmail+1.com abc@gmail+2.com 等等这样的邮箱名称去注册 Cursor 账号，邮箱验证码都可以正确投递到你的 Gmail 邮箱。这样就不需要手动注册一大堆邮箱轮流换着用。

从官网下载和安装 Cursor。

打开桌面应用并登陆，Cursor 会打开浏览器弹窗进行登录，同样的，这里最好不要直接登录，复制 URL 后用无痕模式登录。

前端框架搭建

搭建一个基于 Vue 的前端框架，具体可以参考这篇文章。

启动项目：

❯ npm run dev

安装 axios 依赖：

❯ npm install axios

封装 axios 调用到util/request.js：

import axios from 'axios'
const instance = axios.create({
    baseURL: 'http://localhost:8080'
});
instance.interceptors.response.use(
    result => {
        if (!result.success) {
            // 业务出错
            console.log("业务出错", result.message)
            return null
        }
        return result.data
    },
    error => {
        console.log(error)
        return Promise.reject(error);
    }
)
export default instance

之后就是通过 AI 助手的对话框告诉你的要求，让 AI 一点点填充页面代码。

我与 AI 沟通过程中的内容总结成了一个文档，可以参考。

使用经验

目前 Cursor 或者 AI 效率比较高的部分在前端页面开发，因此我在创建示例项目的过程中，工作流是先确定数据库设计，创建表结构，再通过 Idea 中的 MybatisPlus 插件生成 Service 层代码，然后根据需要编写接口，再使用 PostAPI 之类的工具进行接口测试，将要实现的页面功能和会用到的接口一并告诉 AI，AI 就可以生成相应的前端代码。前端部分大部分都可以靠 AI 生成，我们要注意的是规范接口的标准处理（统一错误提示）、前端接口转发规则、页面布局细节调整等，AI 生成的代码有bug，一般直接丢给 AI 会立即修复。

在整个过程中，可以将 AI 看作一个前端开发，我们要以后端开发和产品经理的角度跟它交流，大部分情况下 AI 都能很好的生成页面，甚至在选取 ElementPlus 控件时比我预料的效果要好。

AI 对不同分辨率屏幕下的页面布局调整效果比较差，当然也可能是我的交流有问题，我个人不太懂前端页面布局这块。感觉前端开发者以后要将精力放在页面布局细节调整和整体美术风格管理上。

AI 会随着前端代码的增加而更加准确，比如一开始不会”主动“使用你封装好的接口调用组件，但随着一两个页面写好，它就会参考已经写好的页面在后续生成代码中主动采用类似的代码封装调用。

目前 AI 生成的内容还是有概率出现 Bug 的，所以最好以单独页面为单元让 AI 生成内容，对于复杂功能或页面，可以逐步拆分让 AI 生成，每次生成后可以在页面上进行功能性验证，没问题后再在 Cursor 中接受代码生成。如果有问题且无法分析问题所在，可以回退代码生成。