Skip to content

Commit 4a73f47

Browse files
committed
Readme v1 edits
1 parent c521131 commit 4a73f47

File tree

1 file changed

+333
-0
lines changed

1 file changed

+333
-0
lines changed

README.md

Lines changed: 333 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,333 @@
1+
<h1 align="center">
2+
<img src="https://raw.githubusercontent.com/jeisele2/OverVue/master/src/assets/overvue-icons/apple-icon-72x72.png">
3+
<br/>
4+
OverVue
5+
</h1>
6+
7+
<p align="center"><b>Prototyping Tool for Vue Developers</b></p>
8+
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+
11+
<p>这个程序能帮你生成Vue 组件, 设置 routes , 也可以帮你显像Component Parent-Child组件树。你只要做一些小配置然后可以下载code boilerplate. 这样你就可以很方便简洁地生成Vue前台APP了!</p>
12+
13+
![](./src/assets/readme/overvuev4.png)
14+
15+
## Table of Contents
16+
17+
- [Features](#features)
18+
- [OverVue 2.0 Changelog](#changelog-20)
19+
- [OverVue 3.0 Changelog](#changelog-30)
20+
- [OverVue 4.0 Changelog](#changelog-40)
21+
- [OverVue 5.0 Changelog](#changelog-50)
22+
- [How to Use](#how-to-use)
23+
- [Installation](#installation)
24+
- [General Installation](#installation)
25+
- [For WSL](#wsl-installation)
26+
- [For Slack OAuth](#slack-oauth)
27+
- [Contributing](#contributing)
28+
- [Authors](#authors)
29+
30+
### Features
31+
32+
- Upload a frontend mockup image
33+
- Visualize draggable and resizable components
34+
- Create parent-child hierarchy of components
35+
- Add html elements to components
36+
- Create routes to be used by Vue Router
37+
- Live-generated previewable code snippets for each component
38+
- Live-generated tree view to aid in visualizing parent-child hierarchy
39+
- Save projects and open previous projects
40+
- Export full boilerplate code for a working frontend
41+
- Undo/redo functionality <sub><sup>(v2.0)</sup></sub>
42+
- Ability to navigate into HTML elements from a selected Vue component <sub><sup>(v2.0)</sup></sub>
43+
- Assign one image per route <sub><sup>(v2.0)</sup></sub>
44+
- Can now set Vue components to specific layers <sub><sup>(v2.0)</sup></sub>
45+
- Will now load route images along with project <sub><sup>(v2.0)</sup></sub>
46+
- Windows compatibility for uploading mockup images. <sub><sup>(v2.0)</sup></sub>
47+
- Full Vuex functionality, can add props, actions, and state to components. <sub><sup>(v3.0)</sup></sub>
48+
- Full edit functionality, can change the name of components as well as delete properties from a component <sub><sup>(v3.0)</sup></sub>
49+
- More robust code snippets with Vuex props, state, and actions included <sub><sup>(v3.0)</sup></sub>
50+
- Hotkey shortcuts to copy/paste/delete selected component <sub><sup>(v4.0)</sup></sub>
51+
- Connect to a Slack Workspace and send Slack Messages through OverVue <sub><sup>(v4.0)</sup></sub>
52+
- Ability to delete states or actions from the store <sub><sup>(v4.0)</sup></sub>
53+
- Vue Devtools enabled for Developers <sub><sup>(v4.0)</sup></sub>/automatically deploys when running electron in dev mode <sub><sup>(v5.0)</sup></sub>
54+
- Exports fully functional Vue 3/Vuex 4 syntax <sub><sup>(v5.0)</sup></sub>
55+
56+
[↥Back to top](#table-of-contents)
57+
58+
### Changelog 2.0
59+
60+
<details><summary>OverVue 2.0</summary>
61+
<ul>
62+
<li>Improved hierarchy tree rendering</li>
63+
<li>Improved Route addition and deletion</li>
64+
<li>Able to search for components by name</li>
65+
<li>Improved UI to be more informative</li>
66+
<li>UI is more reactive, code snippets update dynamically </li>
67+
<li>Component children menu is consistent with children list at time of creation</li>
68+
<li>Children components can no longer choose any of their ancestors to be their children.</li>
69+
<li>Can now use Quasar build -m electron to make windows .exe </li>
70+
<li>Exporting projects now exports the mockup files as well into the assets folder</li>
71+
<li>Saving projects now saves the mockup image url</li>
72+
<li>Extensive bug fixing for Vue component and HTML element deletion behavior, exporting and saving.</li>
73+
</ul>
74+
</details>
75+
76+
### Changelog 3.0
77+
78+
<details><summary>OverVue 3.0</summary>
79+
<ul>
80+
<li>Implemented full component edit functionality</li>
81+
<li>Improved sidebar user interface to consolidate edit functionality</li>
82+
<li>UI is more reactive, improved dashboard's ability to update dynamically </li>
83+
<li>Added ability to incorporate Vuex in application</li>
84+
<li>Updated component details section to better display all aspects of a component</li>
85+
<li>Added action, state, and props section to component details dashboard</li>
86+
<li>New Vuex store dashboard section</li>
87+
<li>More robust code snippets with Vuex props, state, and actions included</li>
88+
<li>Bug fixes for parent/child issues</li>
89+
<li>Improved Documentation for easier onboarding of new contributors</li>
90+
</ul>
91+
</details>
92+
93+
### Changelog 4.0
94+
95+
<details><summary>OverVue 4.0</summary>
96+
<ul>
97+
<li>Integrated Slack through a Slack Login button to link user's slack channel to their OverVue instance</li>
98+
<li>After logging in with Slack, user's have the ability to send a message to their selected Slack channel after saving</li>
99+
<li>Implemented the ability to delete State and Actions from the store</li>
100+
<li>Added the feature to quickly copy/paste Components through hotkeys</li>
101+
<li>Reworked the interface to give users a more intuitive experience</li>
102+
<ul>
103+
<li>Moved bottom dashboard to the right</li>
104+
<li>Features on the left are geared toward creation/editing components</li>
105+
<li>Features on the right are geared toward viewing overall hierarchy of App Prototype</li>
106+
<li>Component Editor menu now switches between create/edit mode depending on if a Component is selected</li>
107+
<li>Vuex Store and Actions now moved to left menu with ability to view/create/delete state and actions</li>
108+
</ul>
109+
<li>Implemented Vue Devtools for development ease</li>
110+
<li>Sped up component tree rendering speed for quicker, smoother viewing</li>
111+
<br>
112+
<h4><strong>Bug Fixes</strong></h4>
113+
<li>Fixed html buttons not properly rendering for selected component</li>
114+
<li>Fixed code snippet not properly rendering for selected component</li>
115+
<li>Fixed JSON parser typeerror with component html lists</li>
116+
<li>Fixed component tree view rendering instability with right sidebar</li>
117+
<li>Fixed children and parent relationship mutations causing type related side effects</li>
118+
<li>Fixed issue where state/actions deleted in store aren't reflected across components</li>
119+
<li>Fixed issue with undo feature that would delete inputed text one character at a time</li>
120+
</ul>
121+
</details>
122+
123+
### Changelog 5.0
124+
125+
<details><summary>OverVue 5.0</summary>
126+
<ul>
127+
<li>Upgraded source code to Vue 3</li>
128+
<li>Upgraded from Vuex 3 to Vuex 4</li>
129+
<li>Upgraded from Electron 5 to 16</li>
130+
<li>Upgraded from Quasar 1 to 2</li>
131+
<li>Rewrote exports in Vue 3</li>
132+
<li>Reconfigured Vue Devtools to launch and connect upon running quasar in dev mode</li>
133+
<li>Note that due to breaking changes when upgrading to Vue 3, vued3tree had to be replaced with vue3-tree. This is intended to be a short-term change, with the old package being returned to upon updating. Due to this, a bulleted list currently renders instead of a tree.</li>
134+
</ul>
135+
</details>
136+
137+
138+
139+
[↥Back to top](#table-of-contents)
140+
141+
## How to use
142+
143+
- Upon opening the application a Connect to Slack button will appear. To skip this step click 'Skip'
144+
- Click the button to open a browser window, log in to your Slack workspace and select a channel to send save notifications.
145+
- If you have logged in to Slack, upon saving your project file you will receive a prompt with the option to notify your team.
146+
![](./src/assets/readme/v4Slack_Oauth.gif)
147+
148+
- OverVue will assign a default root App component and a default route called "HomeView"
149+
- Upload a mockup from your filesystem if you'd like. Remove the mockup and choose a new one if needed.
150+
![](./src/assets/readme/v4Upload_image.gif)
151+
152+
- To add a new component, type its name in the component name box and select any HTML elements that should be rendered by that component.
153+
- HTML elements can also be added after creation by selecting the component in the display, then selecting HTML elements.
154+
- Select a parent component for the new component if needed.
155+
- After adding, you can move and resize the component in the display.
156+
![](./src/assets/readme/v4Creating_Component.gif)
157+
158+
- You can also duplicate components with Ctrl/Cmd C & V and see the component tree updated in real time.
159+
- Duplicate components will appear offset from their original and retain the same state and route assignments.
160+
![](./src/assets/readme/v4Copy_Child_Components.gif)
161+
162+
- Child components will inherit the same parents, but parent components will not inherit duplicate children.
163+
![](./src/assets/readme/v4Copy_Parent_Component.gif)
164+
165+
- The right-side drawer displays live code snippets for the selected element.
166+
![](./src/assets/readme/v4Code_Snippet.gif)
167+
168+
- You can view and add new routes and associated components in the left-hand drawer.
169+
![](./src/assets/readme/v4Copying_Route.gif)
170+
171+
- State and actions can be created, edited, and assigned to components.
172+
![](./src/assets/readme/v4State_and_actions.gif)
173+
174+
- When finished creating, you can export to a file location of your choice. Below is the exported file structure:
175+
176+
```
177+
public/
178+
index.html
179+
src/
180+
assets/
181+
components/
182+
UserCreatedComponent1.vue
183+
UserCreatedComponent2.vue
184+
...
185+
views/
186+
HomeView.vue
187+
UserCreatedRouteComponent1.vue
188+
UserCreatedRouteComponent2.vue
189+
...
190+
App.vue
191+
main.js
192+
router.js
193+
babel.config.js
194+
package.json
195+
```
196+
197+
[↥Back to top](#table-of-contents)
198+
199+
### Installation
200+
201+
To download the development version for windows or mac, please visit https://www.Overvue.io
202+
203+
This app was developed using the Quasar framework, so first you will need to install the Quasar cli
204+
205+
```
206+
npm i -g @quasar/cli
207+
```
208+
209+
Install dependencies
210+
211+
```
212+
npm i
213+
```
214+
215+
To run electron app in dev mode (note: Vue Devtools will launch automatically)
216+
217+
```
218+
quasar dev -m electron
219+
```
220+
221+
To build a new .dmg / windows .exe
222+
223+
```
224+
quasar build -m electron
225+
```
226+
227+
### WSL Installation
228+
229+
**The ability to load the application and/or devtools requires a tool/application to run a linux display as WSL does not have any display drivers since it is based off of just a CLI.
230+
I recommend X410 (https://x410.dev/), althought it does cost \$15, for ease of use. There are free options such as VcXsrv(https://sourceforge.net/projects/vcxsrv/) that you can get, but requires more set up.**
231+
232+
If you choose to use x410, you will need to set the environment DISPLAY variable on each console:
233+
234+
So, to open either the Vue devtools or OverVue in dev mode, first start your X Server then enter into the terminal:
235+
For WSL 1 :
236+
237+
```
238+
export DISPLAY=:0
239+
```
240+
241+
For WSL 2 :
242+
243+
```
244+
export DISPLAY=$(awk '/nameserver / {print $2; exit}' /etc/resolv.conf 2>/dev/null):0
245+
export LIBGL_ALWAYS_INDIRECT=1
246+
```
247+
248+
followed by the command for the devtools or devmode. If you want both open, enter commands above followed by starting the devtools:
249+
250+
```
251+
./node_modules/.bin/vue-devtools
252+
```
253+
254+
Then open a new terminal instance, set the DISPLAY value again (re-enter above command for DISPLAY), and start OverVue in dev mode:
255+
256+
```
257+
quasar dev -m electron
258+
```
259+
260+
### Slack OAuth
261+
262+
For the Slack OAuth, you will need to create a Slack app through their website (https://api.slack.com/apps?new_app=1), so that you have your own Client Secret and Client ID. Then create two .env files (one for development and one for production).
263+
264+
1. Create a Slack App from the link above. Copy your Client ID and Client Secret somewhere safe.
265+
2. Create two .env files in the main root of this repository. Name them:
266+
267+
```
268+
.env
269+
.env.development
270+
```
271+
272+
3. Open .env and add these three environment variables. Replace <client secret> and <client id> with the client id and client secret given to you when you created your Slack App.
273+
274+
```
275+
SLACK_CLIENT_SECRET = "<client secret>"
276+
SLACK_CLIENT_ID = "<client id>"
277+
SLACK_REDIRECT_URI = "overvue://slack"
278+
```
279+
280+
4. Next, open .env.development and do the same, just note that the SLACK_REDIRECT_URI will be different here:
281+
282+
```
283+
SLACK_CLIENT_SECRET = "<client secret>"
284+
SLACK_CLIENT_ID = "<client id>"
285+
SLACK_REDIRECT_URI = "overvuedev://test"
286+
```
287+
288+
[↥Back to top](#table-of-contents)
289+
290+
### Contributing
291+
292+
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.
293+
Here are some features we're thinking about adding:
294+
295+
- Option to export files in TypeScript
296+
- Ability to place child components into HTML elements
297+
- Integration with Storybook
298+
- Edit State and Actions in the Vuex Store
299+
300+
If you make changes and wish to update the website, here is the link to the repo: https://github.com/TeamOverVue/OverVuePage
301+
302+
[↥Back to top](#table-of-contents)
303+
304+
### Authors
305+
306+
```
307+
Contributors:
308+
Joseph Eisele @jeisele2
309+
Dean Chung @deanfchung
310+
Dean Ohashi @dnohashi
311+
Drew Nguyen @drewngyen
312+
Alexander Havas @LOLDragoon
313+
Keriann Lin @keliphan
314+
Allison Pratt @allisons11
315+
Joju Olaode @JojuOlaode
316+
Sean Grace @ziggrace
317+
Nicholas Schillaci @schillaci767
318+
Terry Tilley @codeByCandlelight
319+
Faraz Moallemi @farazmoallemi
320+
Alex Lu @aleckslu
321+
Jeffrey Sul @jeffreysul
322+
Kenny Lee @kennyea
323+
Ryan Bender @rdbender
324+
Sonny Nguyen @sn163
325+
Gabriela Kokhabi // Add Github
326+
Ross Lamerson // Add Github
327+
Shanon Lee // Add Github
328+
Zoew McGrath // Add Github
329+
```
330+
331+
Inspired by [PreVue](https://github.com/open-source-labs/PreVue)
332+
333+
[↥Back to top](#table-of-contents)

0 commit comments

Comments
 (0)