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