当前位置: 首页 > 科技观察

Vue开发者的原型设计工具OverVue

时间:2023-03-15 00:12:13 科技观察

简介OverVue是一个原型设计工具,允许开发者动态创建和可视化Vue应用程序,实现组件层次结构的实时直观树形显示和实时生成的代码预览。生成的样板可以导出为模板以供进一步开发。本程序可以帮你生成Vue组件,设置路由,还可以帮你展示组件Parent-Child组件树。您只需进行一些配置即可下载代码样板。这样就可以轻松简洁的生成Vue公司前端APP!特性上传前端模型图像可视化可拖动和可调整大小的组件创建组件的父子层次结构添加html元素到组件创建VueRouter使用的路由为每个组件实时生成可预览的代码片段实时生成树视图,以帮助可视化父子层次结构保存项目并打开以前的项目导出工作前端的完整样板代码上传模型。删除模型并根据需要选择一个新模型。要添加新组件,请在“组件名称”框中键入其名称,然后选择应由该组件呈现的任何HTML元素。通过在显示中选择组件,然后选择HTML元素,也可以在创建后添加HTML元素。如果需要,为新组件选择一个父组件。添加后,您可以在显示中移动和调整组件大小。您还可以通过右键单击要向其添加子项的组件来向组件添加子项,并且您可以在创建新组件或更改层次结构时看到重新渲染的树。仪表板显示有关每个组件的信息(代码片段和HTML元素)。单击显示中的组件以查看其属性。您可以添加新路线并在侧边栏中查看所有组件和路线。创建后,您可以导出到您选择的文件位置。下面是导出的文件结构:public/index.htmlsrc/assets/components/UserCreatedComponent1.vueUserCreatedComponent2.vue...views/HomeView.vueUserCreatedRouteComponent1.vueUserCreatedRouteComponent2.vue...App.vuemain.jsrouter.jsbabel.config.jspackage。JSON