|
| 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 | + |
| 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 | +  |
| 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 | +  |
| 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 | +  |
| 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 | +  |
| 161 | + |
| 162 | +- Child components will inherit the same parents, but parent components will not inherit duplicate children. |
| 163 | +  |
| 164 | + |
| 165 | +- The right-side drawer displays live code snippets for the selected element. |
| 166 | +  |
| 167 | + |
| 168 | +- You can view and add new routes and associated components in the left-hand drawer. |
| 169 | +  |
| 170 | + |
| 171 | +- State and actions can be created, edited, and assigned to components. |
| 172 | +  |
| 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