适用于Vue开发人员的原型工具OverVue

新闻 开发工具
OverVue是一种原型设计工具,允许开发人员动态创建和可视化Vue应用程序,实现组件层次结构的实时直观树形显示和实时生成的代码预览。

简介

OverVue是一种原型设计工具,允许开发人员动态创建和可视化Vue应用程序,实现组件层次结构的实时直观树形显示和实时生成的代码预览。生成的样板可以作为模板导出,以便进一步开发。

这个程序能帮你生成Vue组件,设置routes,也可以帮你显示组件Parent-Child组件树。你只要做一些小配置然后可以下载代码样板文件。这样你就可以很方便简洁地生成Vue公司前台APP了!

适用于Vue开发人员的原型工具OverVue

特征

  • 上传前端模型图像
  • 可视化可拖动和可调整大小的组件
  • 创建组件的父子层次结构
  • 将html元素添加到组件
  • 创建Vue Router使用的路由
  • 每个组件的实时生成的可预览代码段
  • 实时生成的树视图,以帮助可视化父子层次结构
  • 保存项目并打开以前的项目
  • 导出工作前端的完整样板代码

如何使用

  • 打开应用程序将默认创建一个根App组件和一个名为“HomeView”的根路由
  • 如果您愿意,可以从文件系统上传模型。删除模型并根据需要选择一个新模型。
适用于Vue开发人员的原型工具OverVue
  • 要添加新组件,请在组件名称框中键入其名称,然后选择应由该组件呈现的任何HTML元素。
  • 通过在显示中选择组件,然后选择HTML元素,也可以在创建后添加HTML元素。
  • 如果需要,为新组件选择父组件。
  • 添加后,您可以在显示中移动和调整组件的大小。
  • 您还可以通过右键单击要添加子项的组件来将子项添加到组件,并且可以在创建新组件或更改层次结构时看到树重新呈现。
适用于Vue开发人员的原型工具OverVue
  • 仪表板显示有关每个组件的信息(代码片段和HTML元素)。单击显示中的组件以查看其属性。
适用于Vue开发人员的原型工具OverVue
  • 您可以添加新路线并查看侧栏中的所有组件和路线。
适用于Vue开发人员的原型工具OverVue
  • 完成创建后,您可以导出到您选择的文件位置。以下是导出的文件结构:
  1. public
  2.  index.html 
  3. src/ 
  4.  assets/ 
  5.  components/ 
  6.  UserCreatedComponent1.vue 
  7.  UserCreatedComponent2.vue 
  8.  ... 
  9.  views/ 
  10.  HomeView.vue 
  11.  UserCreatedRouteComponent1.vue 
  12.  UserCreatedRouteComponent2.vue 
  13.  ... 
  14.  App.vue 
  15.  main.js 
  16.  router.js 
  17. babel.config.js 
  18. package.json 
责任编辑:张燕妮 来源: 今日头条
相关推荐

2020-05-07 10:40:37

Web工具CSS

2010-03-24 09:54:27

PHPPython

2020-03-15 13:53:42

前端开发工具

2020-05-07 07:47:12

git命令Linux开发

2023-01-03 10:13:15

C#开发IDE

2012-07-20 10:46:44

Web

2020-06-09 07:57:47

前端开发代码

2022-04-01 10:41:09

Vue.js开发工具

2009-04-03 10:00:56

2019-06-03 14:20:30

Java数据库大数据工具

2021-08-07 15:38:07

开发Java工具

2018-04-08 10:08:43

开发人员工具

2020-06-28 09:56:48

.NET开发工具

2012-05-30 15:15:42

ibmdw

2023-03-15 07:12:53

企业开发人员提供商

2010-08-09 16:09:25

2012-03-20 13:58:50

JavaScript

2023-08-30 08:01:37

前端CSS

2020-04-07 17:13:15

开发工具技术

2015-02-10 09:24:04

Web开发JavaScript工具
点赞
收藏

51CTO技术栈公众号