|
1 | | -# OverVue (Beta) |
| 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 (Beta) |
| 5 | +</h1> |
2 | 6 |
|
3 | | -**WIP** |
| 7 | +<p align="center"><b>Prototyping Tool for Vue Developers</b></p> |
4 | 8 |
|
5 | | -Original Project: https://github.com/open-source-labs/PreVue |
| 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> |
6 | 10 |
|
7 | | -#### Authors |
| 11 | +#### Features |
| 12 | ++ Upload a frontend mockup image |
| 13 | ++ Visualize draggable and resizable components |
| 14 | ++ Create parent-child hierarchy of components |
| 15 | ++ Add html elements to components |
| 16 | ++ Create routes to be used by Vue Router |
| 17 | ++ Live-generated previewable code snippets for each component |
| 18 | ++ Live-generated tree view to aid in visualizing parent-child hierarchy |
| 19 | ++ Save projects and open previous projects |
| 20 | ++ Export full boilerplate code for a working frontend |
| 21 | + |
| 22 | + |
| 23 | +#### How to use |
| 24 | ++ Opening the application will create by default a root App component and a root route called "HomeView" |
| 25 | ++ Upload an mockup from your filesystem if you'd like. Remove the mockup and choose a new one if needed. |
| 26 | + |
| 27 | + |
| 28 | ++ 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. |
| 29 | ++ HTML elements can also be added after creation by selecting the component in the display, then selecting HTML elements. |
| 30 | ++ Select a parent component for the new component if needed. |
| 31 | ++ After adding, you can move and resize the component in the display. |
| 32 | + |
| 33 | + |
| 34 | ++ You can also add children to components by right-clicking the component to add children to, and you can see the tree rerender as you create new components or change the hierarchy. |
| 35 | + |
| 36 | + |
| 37 | ++ The dashboard shows info about each component (code snippets and HTML elements). Click a component in the display to see its properties. |
| 38 | + |
| 39 | + |
| 40 | ++ You can add new routes and view all components and routes in the sidebar. |
| 41 | + |
| 42 | + |
| 43 | ++ When finished creating, you can export to a file location of your choice. Below is the exported file structure: |
| 44 | + |
| 45 | +``` |
| 46 | +public/ |
| 47 | + index.html |
| 48 | +src/ |
| 49 | + assets/ |
| 50 | + components/ |
| 51 | + UserCreatedComponent1.vue |
| 52 | + UserCreatedComponent2.vue |
| 53 | + ... |
| 54 | + views/ |
| 55 | + HomeView.vue |
| 56 | + UserCreatedRouteComponent1.vue |
| 57 | + UserCreatedRouteComponent2.vue |
| 58 | + ... |
| 59 | + App.vue |
| 60 | + main.js |
| 61 | + router.js |
| 62 | +babel.config.js |
| 63 | +package.json |
| 64 | +``` |
| 65 | + |
| 66 | +#### Running a local version |
| 67 | +This app was developed using the Quasar framework, so first you will need to install the Quasar cli |
| 68 | +``` |
| 69 | +npm i quasar-cli |
| 70 | +``` |
| 71 | +Install dependencies |
| 72 | +``` |
| 73 | +npm i |
| 74 | +``` |
| 75 | +To run electron app in dev mode |
| 76 | +``` |
| 77 | +quasar dev -m electron |
8 | 78 | ``` |
9 | | -Founders: |
10 | | -Hubert Lin @hubelin |
11 | | -Annette Lin @al2613 |
12 | | -Daniel Shu @danshuu |
13 | | -Franklin Pinnock @pinnockf |
| 79 | +To build a new .dmg |
| 80 | +``` |
| 81 | +quasar build -m electron |
| 82 | +``` |
| 83 | + |
| 84 | +#### Contributing |
| 85 | +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. |
| 86 | +Here are some features we're thinking about adding: |
| 87 | ++ Vuex state prototyping and boilerplate export |
| 88 | ++ Ability to add additional mockup images for more routes |
| 89 | ++ Ability to nest HTML elements |
| 90 | ++ Option to export files in TypeScript |
14 | 91 |
|
| 92 | +#### Authors |
| 93 | +``` |
15 | 94 | Contributors: |
16 | 95 | Joseph Eisele @jeisele2 |
17 | 96 | Dean Chung @deanfchung |
18 | 97 | Dean Ohashi @dnohashi |
19 | 98 | Drew Nguyen @drewngyen |
20 | 99 | ``` |
| 100 | +Inspired by [PreVue](https://github.com/open-source-labs/ReacType) |
0 commit comments