6
6
7
7
<p align =" center " ><b >Prototyping Tool for Vue Developers</b ></p >
8
8
9
- <p >OverVue is a prototyping tool that allows developers to < em > dynamically</ em > create and visualize a Vue application, implementing a real-time intuitive < em > tree display</ em > of component hierarchy and a live-generated < em > code preview</ em > . The resulting boilerplate can be < em > exported</ em > as a template for further development.</p >
9
+ <p >OverVue is a prototyping tool that allows developers to dynamically create and visualize a Vue application, implementing a real-time intuitive tree display of component hierarchy and a live-generated code preview. The resulting boilerplate can be exported as a template for further development.</p >
10
10
11
11
<p >这个程序能帮你生成Vue 组件, 设置 routes , 也可以帮你显像Component Parent-Child组件树。你只要做一些小配置然后可以下载code boilerplate. 这样你就可以很方便简洁地生成Vue前台APP了!</p >
12
12
22
22
+ Live-generated tree view to aid in visualizing parent-child hierarchy
23
23
+ Save projects and open previous projects
24
24
+ Export full boilerplate code for a working frontend
25
-
25
+ + Undo/redo functionality <sub ><sup >(v2.0)</sup ></sub >
26
+ + Can nest HTML elements <sub ><sup >(v2.0)</sup ></sub >
27
+ + Ability to navigate into HTML elements from a selected Vue component <sub ><sup >(v2.0)</sup ></sub >
28
+ + Assign one image per route <sub ><sup >(v2.0)</sup ></sub >
29
+ + Can now set Vue components to specific layers <sub ><sup >(v2.0)</sup ></sub >
30
+ + Will now load route images along with project <sub ><sup >(v2.0)</sup ></sub >
31
+ + Windows compatibility for uploading mockup images. <sub ><sup >(v2.0)</sup ></sub >
32
+
33
+ #### Changelog
34
+ <details ><summary >OverVue 2.0</summary >
35
+ <ul >
36
+ <li >Improved hierarchy tree rendering</li >
37
+ <li >Improved Route addition and deletion</li >
38
+ <li >Able to search for components by name</li >
39
+ <li >Improved UI to be more informative</li >
40
+ <li >UI is more reactive, code snippets update dynamically </li >
41
+ <li >Component children menu is consistent with children list at time of creation</li >
42
+ <li >Children components can no longer choose any of their ancestors to be their children.</li >
43
+ <li >Can now use Quasar build -m electron to make windows .exe </li >
44
+ <li >Exporting projects now exports the mockup files as well into the assets folder</li >
45
+ <li >Saving projects now saves the mockup image url</li >
46
+ <li >Extensive bug fixing for Vue component and HTML element deletion behavior, exporting and saving.</li >
47
+ </ul >
48
+ </details >
26
49
27
50
#### How to use
28
51
+ Opening the application will create by default a root App component and a root route called "HomeView"
66
89
babel.config.js
67
90
package.json
68
91
```
92
+ ###### OverVue v2.0 How to
93
+ + Undo/Redo feature has been added to the top right of the program, you can also use CTRL+z and CTRL+y respectively.
94
+
95
+ + You can nest html elements in two different ways:
96
+ 1 . Upon creating a component and adding an html element into it, Select the component to make it the active component.
97
+ Go to the html elements tab and then double click on the html element you wish to be the target for your new elements.
98
+ Once the html element is selected, use the left hand panel and start adding elements like you were adding it to a component.
99
+
100
+ 2 . Similar to above, but instead of double clicking, you can press the down arrow icon on the html element button to enter it.
101
+ From there the view will change to the contents of that particular HTML element.
102
+ You can then add html elements like you would for a component using the left hand side
103
+
104
+ + Setting layers on a component is done by right clicking the desired component on the component display and using the menu option
105
+ All components start on layer 1 by default.
106
+
107
+
108
+
109
+
110
+
111
+
69
112
70
113
#### Running a local version
71
114
This app was developed using the Quasar framework, so first you will need to install the Quasar cli
@@ -80,7 +123,7 @@ To run electron app in dev mode
80
123
```
81
124
quasar dev -m electron
82
125
```
83
- To build a new .dmg
126
+ To build a new .dmg / windows .exe
84
127
```
85
128
quasar build -m electron
86
129
```
@@ -89,9 +132,10 @@ quasar build -m electron
89
132
We'd love for you to test this application out and submit any issues you encounter. Also feel free to fork to your own repo and submit PRs.
90
133
Here are some features we're thinking about adding:
91
134
+ Vuex state prototyping and boilerplate export
92
- + Ability to add additional mockup images for more routes
93
- + Ability to nest HTML elements
94
135
+ Option to export files in TypeScript
136
+ + Ability to place child components into HTML elements
137
+ + Integration with Storybook
138
+ + Ability to add a copy of an existing component from one route to another
95
139
96
140
#### Authors
97
141
```
@@ -100,5 +144,9 @@ Joseph Eisele @jeisele2
100
144
Dean Chung @deanfchung
101
145
Dean Ohashi @dnohashi
102
146
Drew Nguyen @drewngyen
147
+ Alexander Havas @LOLDragoon
148
+ Keriann Lin @keliphan
149
+ Allison Pratt @allisons11
150
+ Joju Olaode @JojuOlaode
103
151
```
104
152
Inspired by [ PreVue] ( https://github.com/open-source-labs/PreVue )
0 commit comments