上一篇随笔《使用Cursor实现管理系统登录界面的快速开发》介绍了开发一个简单系统的登录界面，通过图片效果和简单的文字描述，就可以利用Cursor来快速生成相当不错的界面代码。本篇随笔继续探讨前端界面的快速生成，介绍使用图片效果快速构建一个系统的主布局界面代码。
现在网上可以找到很多不错的框架，其界面布局整体来说非常不错，因此我们可以用来参考，然后利用Cursor来给我依葫芦画瓢来构建我们的Vue3前端界面布局。
管理系统需承载更多的菜单入口，因此一般是这种左侧菜单，右侧内容的显示方式，大同小异，我们找一个较为美观的参考就可以了。
然后复制到项目里面，@Cursor来处理即可，如下截图所示。
然后泡杯咖啡，静静等待即可，估计还没开始拿到咖啡，Cursor就已经完成了。
Cursor一边把你的描述化为一步步的指令，快速而高效的进行构建界面代码。如果我们细化了解它的运行思路和步骤，可以一边喝咖啡，一边慢慢的观赏它的运行路线，也是一件很有意思的事情。
最后在Cursor构建界面的时候或者之前，使用npm run dev的命令运行Vue3的界面，这样它完成后就会马上看到效果了。
除了布局和首页的内容，我们没有多余的页面创建，这个就是大致类似的效果，但是它是使用Vue3+TypeScript+ElementPlus（我们前面做登录界面开始就设定的技术路线），也就是我们基于这样的技术路线，通过使用图片效果构建的界面代码。
有了前端界面元素的占位，我们就可以继续进一步完善首页或者增加页面内容，只需要文字描述和图片即可。
有了主布局界面和首页，我们可以进一步创建一些界面了。
例如我需要生成二维码图片的页面，二维码中间以指定图片进行叠放，因此如下处理。
等待完成后，单击添加的菜单项目，就可以马上看到效果了。
我们查看对应的package.json可以看到它已经给我添加相关组件依赖：用来生成和显示二维码所需的组件了。
在拥有Cursor构建界面之前，一般我们要做大屏展示，多数是需要寻找和参考已有的一些界面效果，然后摘录到我们的界面上来，这样处理低效而复杂。
给Cursor指令：在左侧菜单中增加一个进入大屏看板的页面，大屏展示相关的ERP相关数据看板信息，包括但不限于汇总数据，柱状图，折线图，饼图、曲线图，环状图等常规看板元素。
大屏默认还提供一个全屏显示的效果，也就是看不到浏览器地址的全屏效果，很酷。
有些界面效果还需进一步优化处理，不过雏形已经很好了。剩下的就是和后端对接展现真实的数据了，这个对于Cursor来说也是小菜一碟。
通过这些天利用cursor来做开发，带给我更多的惊奇之外，也逐渐了解如何使用它来进一步提高开发效率，通过图片、文字、截图文档描述，参考连接等多种资源，都可以被Cursor很好的识别并利用，而且理解能力出奇的精准，因此也逐步放心，从开始的关键操作，手工确认，到最后彻底放飞自我，让它全部代劳，不用请示，每当完成一个核心功能，测试看看效果，满意就SVN提交，然后继续下一个，即使中间有任何差池，也可以通过SVN还原回来即可。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。