1
1
<h1 align =" center " >
2
2
<img src =" https://raw.githubusercontent.com/jeisele2/OverVue/master/src/assets/overvue-icons/apple-icon-72x72.png " >
3
3
<br />
4
- OverVue (Beta)
4
+ OverVue
5
5
</h1 >
6
6
7
7
<p align =" center " ><b >Prototyping Tool for Vue Developers</b ></p >
15
15
## Table of Contents
16
16
17
17
* [ Features] ( #features )
18
- * [ Changelog] ( #changelog )
19
- * [ Tutorial] ( #howtouse )
20
- + [ New Features Tutorial] ( #overvue-v2.0 -how-to )
18
+ * [ OverVue 2.0 Changelog] ( #changelog )
19
+ * [ Tutorial] ( #how-to-use )
20
+ + [ New Features Tutorial] ( #overvue-v20 -how-to )
21
21
* [ How to Run] ( #running-a-local-version )
22
22
* [ Contributing] ( #contributing )
23
23
* [ Authors] ( #authors )
24
24
25
- #### Features
25
+ ### Features
26
26
+ Upload a frontend mockup image
27
27
+ Visualize draggable and resizable components
28
28
+ Create parent-child hierarchy of components
40
40
+ Will now load route images along with project <sub ><sup >(v2.0)</sup ></sub >
41
41
+ Windows compatibility for uploading mockup images. <sub ><sup >(v2.0)</sup ></sub >
42
42
43
- #### Changelog
43
+ [ ↥Back to top] ( #table-of-contents )
44
+
45
+ ### Changelog
44
46
<details ><summary >OverVue 2.0</summary >
45
47
<ul >
46
48
<li >Improved hierarchy tree rendering</li >
57
59
</ul >
58
60
</details >
59
61
60
- #### How to use
62
+ [ ↥Back to top] ( #table-of-contents )
63
+
64
+ ## How to use
61
65
+ Opening the application will create by default a root App component and a root route called "HomeView"
62
66
+ Upload a mockup from your filesystem if you'd like. Remove the mockup and choose a new one if needed.
63
67
![ ] ( https://raw.githubusercontent.com/jeisele2/OverVue/master/src/assets/gifs/upload-image-drawers.gif )
99
103
babel.config.js
100
104
package.json
101
105
```
102
- ###### OverVue v2.0 How to
106
+ [ ↥Back to top] ( #table-of-contents )
107
+
108
+ ### OverVue v2.0 How to
103
109
+ Undo/Redo feature has been added to the top right of the program, you can also use CTRL+z and CTRL+y respectively.
104
110
105
111
+ You can nest html elements in two different ways:
@@ -114,7 +120,9 @@ package.json
114
120
+ Setting layers on a component is done by right clicking the desired component on the component display and using the menu option
115
121
All components start on layer 1 by default.
116
122
117
- #### Running a local version
123
+ [ ↥Back to top] ( #table-of-contents )
124
+
125
+ ### Running a local version
118
126
This app was developed using the Quasar framework, so first you will need to install the Quasar cli
119
127
```
120
128
npm i -g @quasar/cli
@@ -132,7 +140,9 @@ To build a new .dmg / windows .exe
132
140
quasar build -m electron
133
141
```
134
142
135
- #### Contributing
143
+ [ ↥Back to top] ( #table-of-contents )
144
+
145
+ ### Contributing
136
146
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.
137
147
Here are some features we're thinking about adding:
138
148
+ Vuex state prototyping and boilerplate export
@@ -141,7 +151,9 @@ Here are some features we're thinking about adding:
141
151
+ Integration with Storybook
142
152
+ Ability to add a copy of an existing component from one route to another
143
153
144
- #### Authors
154
+ [ ↥Back to top] ( #table-of-contents )
155
+
156
+ ### Authors
145
157
```
146
158
Contributors:
147
159
Joseph Eisele @jeisele2
@@ -154,3 +166,4 @@ Allison Pratt @allisons11
154
166
Joju Olaode @JojuOlaode
155
167
```
156
168
Inspired by [ PreVue] ( https://github.com/open-source-labs/PreVue )
169
+ [ ↥Back to top] ( #table-of-contents )
0 commit comments