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

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

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

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

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

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

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

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

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

2、生成另外的页面内容

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

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

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

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