Skip to content

Commit a4273d0

Browse files
lamerson28lamerson28
authored
Merge pull request #131 from open-source-labs/readme
Updated ReadMe with Overvue 5.0 items
2 parents c521131 + bf4ade6 commit a4273d0

File tree

1 file changed

+336
-0
lines changed

1 file changed

+336
-0
lines changed

‎README.md

Lines changed: 336 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,336 @@
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 major dependencies to newest versions</li>
129+
<ul>
130+
<li>Upgraded from Vuex 3 to Vuex 4</li>
131+
<li>Upgraded from Electron 5 to 16</li>
132+
<li>Upgraded from Quasar 1 to 2</li>
133+
</ul>
134+
<li>Rewrote exports in Vue 3</li>
135+
<li>Reconfigured Vue Devtools to launch and connect upon running quasar in dev mode</li>
136+
<li>Note that due to breaking changes when upgrading to Vue 3, vued3tree had to be replaced with vue3-tree.Due to this, a bulleted list currently renders instead of a tree. This is intended to be a short-term change, with the old package being utilized again once it is compatible.</li>
137+
</ul>
138+
</details>
139+
140+
141+
142+
[↥Back to top](#table-of-contents)
143+
144+
## How to use
145+
146+
- Upon opening the application a Connect to Slack button will appear. To skip this step click 'Skip'
147+
- Click the button to open a browser window, log in to your Slack workspace and select a channel to send save notifications.
148+
- If you have logged in to Slack, upon saving your project file you will receive a prompt with the option to notify your team.
149+
![](./src/assets/readme/v4Slack_Oauth.gif)
150+
151+
- OverVue will assign a default root App component and a default route called "HomeView"
152+
- Upload a mockup from your filesystem if you'd like. Remove the mockup and choose a new one if needed.
153+
![](./src/assets/readme/v4Upload_image.gif)
154+
155+
- 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.
156+
- HTML elements can also be added after creation by selecting the component in the display, then selecting HTML elements.
157+
- Select a parent component for the new component if needed.
158+
- After adding, you can move and resize the component in the display.
159+
![](./src/assets/readme/v4Creating_Component.gif)
160+
161+
- You can also duplicate components with Ctrl/Cmd C & V and see the component tree updated in real time.
162+
- Duplicate components will appear offset from their original and retain the same state and route assignments.
163+
![](./src/assets/readme/v4Copy_Child_Components.gif)
164+
165+
- Child components will inherit the same parents, but parent components will not inherit duplicate children.
166+
![](./src/assets/readme/v4Copy_Parent_Component.gif)
167+
168+
- The right-side drawer displays live code snippets for the selected element.
169+
![](./src/assets/readme/v4Code_Snippet.gif)
170+
171+
- You can view and add new routes and associated components in the left-hand drawer.
172+
![](./src/assets/readme/v4Copying_Route.gif)
173+
174+
- State and actions can be created, edited, and assigned to components.
175+
![](./src/assets/readme/v4State_and_actions.gif)
176+
177+
- When finished creating, you can export to a file location of your choice. Below is the exported file structure:
178+
179+
```
180+
public/
181+
index.html
182+
src/
183+
assets/
184+
components/
185+
UserCreatedComponent1.vue
186+
UserCreatedComponent2.vue
187+
...
188+
views/
189+
HomeView.vue
190+
UserCreatedRouteComponent1.vue
191+
UserCreatedRouteComponent2.vue
192+
...
193+
App.vue
194+
main.js
195+
router.js
196+
babel.config.js
197+
package.json
198+
```
199+
200+
[↥Back to top](#table-of-contents)
201+
202+
### Installation
203+
204+
To download the development version for windows or mac, please visit https://www.Overvue.io
205+
206+
This app was developed using the Quasar framework, so first you will need to install the Quasar cli
207+
208+
```
209+
npm i -g @quasar/cli
210+
```
211+
212+
Install dependencies
213+
214+
```
215+
npm i
216+
```
217+
218+
To run electron app in dev mode (note: Vue Devtools will launch automatically)
219+
220+
```
221+
quasar dev -m electron
222+
```
223+
224+
To build a new .dmg / windows .exe
225+
226+
```
227+
quasar build -m electron
228+
```
229+
230+
### WSL Installation
231+
232+
**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.
233+
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.**
234+
235+
If you choose to use x410, you will need to set the environment DISPLAY variable on each console:
236+
237+
So, to open either the Vue devtools or OverVue in dev mode, first start your X Server then enter into the terminal:
238+
For WSL 1 :
239+
240+
```
241+
export DISPLAY=:0
242+
```
243+
244+
For WSL 2 :
245+
246+
```
247+
export DISPLAY=$(awk '/nameserver / {print $2; exit}' /etc/resolv.conf 2>/dev/null):0
248+
export LIBGL_ALWAYS_INDIRECT=1
249+
```
250+
251+
followed by the command for the devtools or devmode. If you want both open, enter commands above followed by starting the devtools:
252+
253+
```
254+
./node_modules/.bin/vue-devtools
255+
```
256+
257+
Then open a new terminal instance, set the DISPLAY value again (re-enter above command for DISPLAY), and start OverVue in dev mode:
258+
259+
```
260+
quasar dev -m electron
261+
```
262+
263+
### Slack OAuth
264+
265+
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).
266+
267+
1. Create a Slack App from the link above. Copy your Client ID and Client Secret somewhere safe.
268+
2. Create two .env files in the main root of this repository. Name them:
269+
270+
```
271+
.env
272+
.env.development
273+
```
274+
275+
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.
276+
277+
```
278+
SLACK_CLIENT_SECRET = "<client secret>"
279+
SLACK_CLIENT_ID = "<client id>"
280+
SLACK_REDIRECT_URI = "overvue://slack"
281+
```
282+
283+
4. Next, open .env.development and do the same, just note that the SLACK_REDIRECT_URI will be different here:
284+
285+
```
286+
SLACK_CLIENT_SECRET = "<client secret>"
287+
SLACK_CLIENT_ID = "<client id>"
288+
SLACK_REDIRECT_URI = "overvuedev://test"
289+
```
290+
291+
[↥Back to top](#table-of-contents)
292+
293+
### Contributing
294+
295+
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.
296+
Here are some features we're thinking about adding:
297+
298+
- Option to export files in TypeScript
299+
- Ability to place child components into HTML elements
300+
- Integration with Storybook
301+
- Edit State and Actions in the Vuex Store
302+
303+
If you make changes and wish to update the website, here is the link to the repo: https://github.com/TeamOverVue/OverVuePage
304+
305+
[↥Back to top](#table-of-contents)
306+
307+
### Authors
308+
309+
```
310+
Contributors:
311+
Joseph Eisele @jeisele2
312+
Dean Chung @deanfchung
313+
Dean Ohashi @dnohashi
314+
Drew Nguyen @drewngyen
315+
Alexander Havas @LOLDragoon
316+
Keriann Lin @keliphan
317+
Allison Pratt @allisons11
318+
Joju Olaode @JojuOlaode
319+
Sean Grace @ziggrace
320+
Nicholas Schillaci @schillaci767
321+
Terry Tilley @codeByCandlelight
322+
Faraz Moallemi @farazmoallemi
323+
Alex Lu @aleckslu
324+
Jeffrey Sul @jeffreysul
325+
Kenny Lee @kennyea
326+
Ryan Bender @rdbender
327+
Sonny Nguyen @sn163
328+
Gabriela Kokhabi @gkokhabi
329+
Ross Lamerson @lamerson28
330+
Shanon Lee @shanon98lee
331+
Zoew McGrath @Z-McGrath
332+
```
333+
334+
Inspired by [PreVue](https://github.com/open-source-labs/PreVue)
335+
336+
[↥Back to top](#table-of-contents)

0 commit comments

Comments
 (0)