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

现在网上可以找到很多不错的框架其界面布局整体来说非常不错因此我们可以用来参考然后利用Cursor来给我依葫芦画瓢来构建我们的Vue3前端界面布局。管理系统需承载更多的菜单入口因此一般是这种左侧菜单右侧内容的显示方式大同小异我们找一个较为美观的参考就可以了。然后复制到项目里面Cursor来处理即可如下截图所示。然后泡杯咖啡静静等待即可估计还没开始拿到咖啡Cursor就已经完成了。Cursor一边把你的描述化为一步步的指令快速而高效的进行构建界面代码。如果我们细化了解它的运行思路和步骤可以一边喝咖啡一边慢慢的观赏它的运行路线也是一件很有意思的事情。最后在Cursor构建界面的时候或者之前使用npm run dev的命令运行Vue3的界面这样它完成后就会马上看到效果了。除了布局和首页的内容我们没有多余的页面创建这个就是大致类似的效果但是它是使用Vue3TypeScriptElementPlus我们前面做登录界面开始就设定的技术路线也就是我们基于这样的技术路线通过使用图片效果构建的界面代码。有了前端界面元素的占位我们就可以继续进一步完善首页或者增加页面内容只需要文字描述和图片即可。2、生成另外的页面内容有了主布局界面和首页我们可以进一步创建一些界面了。例如我需要生成二维码图片的页面二维码中间以指定图片进行叠放因此如下处理。等待完成后单击添加的菜单项目就可以马上看到效果了。我们查看对应的package.json可以看到它已经给我添加相关组件依赖用来生成和显示二维码所需的组件了。