Cursor零代码开发流程-前端项目开发

与后端开发大同小异，先找一个空的vue项目，引入cursor

页面布局开发：

页面布局提示词：

其中需要上传页面原型的截图

如果生成的布局不对，可以调整提示词重试

需要执行第6步添加依赖，重启项目。

异常处理：

 复制异常告知ai，程序运行异常了，解决后接受文件即可。

页面颜色调整：

发现页面菜单部分，没有一个颜色分隔，继续要求ai工作，提示词（可以指定背景颜色）如下：

前端需要多次微调提示词，才能达到想要的效果。

效果如下：

 

添加菜单的icon图标：

 

执行后，发现页面不能展示，并且项目控制台没有报错。此时就需要查看浏览器的控制台，有错误直接截图给ai即可。

让ai生成一个首页

截图当前页面，然后添加如下提示词：

即可获取到如下页面：

发现有调整的地方，完善提示词如下：

业务开发：

部门管理：

需要先上传页面原型，然后在贴入如下提示词

接受代码后，安装依赖，刷新页面却发现出现错误：

截图交给ai

此时接口返回401，是由于后端代码已经开发了jwt令牌功能，而前端还没有，所以算是正常。

如果不放心，也可以把后端代码的WebConfig类的拦截器注释掉，然后重启后端服务。

调整页面的提示词准备：

连同上图一并提交ai对话框：

后边留有白块，不美观，并且需求没有要展示创建时间，继续调整：

继续调整的提示词如下：

最终测试一下curd功能，发现都能正常使用。

员工管理：

 以上提示词太长了，只截取部分感受一下。

查看效果如下：

对照页面原型，进行微调：

有异常需要处理，可以参考上边的解决办法。

对于页面展示效果，可以进行多次提示词的微调：

最终展示效果如下：

并且列表页接口都能使用

 新增员工调整：

提示词连同新增员工原型图一起提交给ai：

调整后的页面效果：

功能测试：

编辑员工：

发现 工作经历的时间 回显不了。

截图：

加上提示词提交给ai：

其他功能自己测试，已经可以使用了。

登录：

提示词如下：

连同登录页面一起提交ai对话框

生成页面如下：

在做部门管理的时候，把 后端代码的WebConfig类的拦截器注释了，此时需要把拦截器恢复，然后重启后端服务。

后续登录功能测试后，符合预期。