使用Cursor实现管理系统的主界面布局的Vue3前端开发

文章使用Cursor实现管理系统的主界面布局的Vue3前端开发分享给大家，欢迎收藏极客资料网，专注分享技术知识

上一篇随笔《使用Cursor实现管理系统登录界面的快速开发》介绍了开发一个简单系统的登录界面，通过图片效果和简单的文字描述，就可以利用Cursor来快速生成相当不错的界面代码。本篇随笔继续探讨前端界面的快速生成，介绍使用图片效果快速构建一个系统的主布局界面代码。

1、基于主布局界面的图片效果生成代码

现在网上可以找到很多不错的框架，其界面布局整体来说非常不错，因此我们可以用来参考，然后利用Cursor来给我依葫芦画瓢来构建我们的Vue3前端界面布局。

管理系统需承载更多的菜单入口，因此一般是这种左侧菜单，右侧内容的显示方式，大同小异，我们找一个较为美观的参考就可以了。

然后复制到项目里面，@Cursor来处理即可，如下截图所示。

然后泡杯咖啡，静静等待即可，估计还没开始拿到咖啡，Cursor就已经完成了。

Cursor一边把你的描述化为一步步的指令，快速而高效的进行构建界面代码。如果我们细化了解它的运行思路和步骤，可以一边喝咖啡，一边慢慢的观赏它的运行路线，也是一件很有意思的事情。

最后在Cursor构建界面的时候或者之前，使用npm run dev的命令运行Vue3的界面，这样它完成后就会马上看到效果了。

除了布局和首页的内容，我们没有多余的页面创建，这个就是大致类似的效果，但是它是使用Vue3+TypeScript+ElementPlus（我们前面做登录界面开始就设定的技术路线），也就是我们基于这样的技术路线，通过使用图片效果构建的界面代码。

有了前端界面元素的占位，我们就可以继续进一步完善首页或者增加页面内容，只需要文字描述和图片即可。

2、生成另外的页面内容

有了主布局界面和首页，我们可以进一步创建一些界面了。

例如我需要生成二维码图片的页面，二维码中间以指定图片进行叠放，因此如下处理。

 

等待完成后，单击添加的菜单项目，就可以马上看到效果了。

我们查看对应的package.json可以看到它已经给我添加相关组件依赖：用来生成和显示二维码所需的组件了。

3、生成大屏显示页面

在拥有Cursor构建界面之前，一般我们要做大屏展示，多数是需要寻找和参考已有的一些界面效果，然后摘录到我们的界面上来，这样处理低效而复杂。

给Cursor指令：在左侧菜单中增加一个进入大屏看板的页面，大屏展示相关的ERP相关数据看板信息，包括但不限于汇总数据，柱状图，折线图，饼图、曲线图，环状图等常规看板元素。

大屏默认还提供一个全屏显示的效果，也就是看不到浏览器地址的全屏效果，很酷。

有些界面效果还需进一步优化处理，不过雏形已经很好了。剩下的就是和后端对接展现真实的数据了，这个对于Cursor来说也是小菜一碟。

通过这些天利用cursor来做开发，带给我更多的惊奇之外，也逐渐了解如何使用它来进一步提高开发效率，通过图片、文字、截图文档描述，参考连接等多种资源，都可以被Cursor很好的识别并利用，而且理解能力出奇的精准，因此也逐步放心，从开始的关键操作，手工确认，到最后彻底放飞自我，让它全部代劳，不用请示，每当完成一个核心功能，测试看看效果，满意就SVN提交，然后继续下一个，即使中间有任何差池，也可以通过SVN还原回来即可。

文章来源:https://www.cnblogs.com/wuhuacong/p/20036230
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！