|
169 | 169 |
|
170 | 170 | [↥Back to top](#table-of-contents)
|
171 | 171 |
|
172 |
| -## How to use |
173 |
| - |
174 |
| -- Please take a few minutes to watch a quick, yet thorough YouTube tutorial of how to navigate our app : |
175 |
| - <iframe width ='400' height='315' src='https://youtu.be/dQw4w9WgXcQ'> </iframe> |
176 |
| -- Please take a few minutes to read a quick, yet thorough <a href='https://github.com/open-source-labs/OverVue'> Tutorial </a> of how to navigate our app. |
177 |
| -<!-- - Click the settings button to open a browser window, log in to your Slack workspace and select a channel to send save notifications. |
178 |
| -- If you have logged in to Slack, upon saving your project file you will receive a prompt with the option to notify your team. |
179 |
| -  |
180 |
| -
|
181 |
| -- OverVue will assign a default root App component and a default route called "HomeView" |
182 |
| -- Upload a mockup from your filesystem if you'd like. Remove the mockup and choose a new one if needed. |
183 |
| -  |
184 |
| -
|
185 |
| -- 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. |
186 |
| -- HTML elements can also be added after creation by selecting the component in the display, then selecting HTML elements. |
187 |
| -- Select a parent component for the new component if needed. |
188 |
| -- After adding, you can move and resize the component in the display. |
189 |
| -  |
190 |
| -
|
191 |
| -- You can also duplicate components with Ctrl/Cmd C & V and see the component tree updated in real time. |
192 |
| -- Duplicate components will appear offset from their original and retain the same state and route assignments. |
193 |
| -  |
194 |
| -
|
195 |
| -- Child components will inherit the same parents, but parent components will not inherit duplicate children. |
196 |
| -  |
197 |
| -
|
198 |
| -- The right-side drawer displays live code snippets for the selected element. |
199 |
| -  |
200 |
| -
|
201 |
| -- You can view and add new routes and associated components in the left-hand drawer. |
202 |
| -  |
203 |
| -
|
204 |
| -- State and actions can be created, edited, and assigned to components. |
205 |
| -  --> |
206 |
| - |
207 |
| -- Below is the exported file structure: |
208 |
| - |
209 |
| -``` |
210 |
| -public/ |
211 |
| - index.html |
212 |
| -src/ |
213 |
| - assets/ |
214 |
| - components/ |
215 |
| - UserCreatedComponent1.vue |
216 |
| - UserCreatedComponent2.vue |
217 |
| - ... |
218 |
| - views/ |
219 |
| - HomeView.vue |
220 |
| - UserCreatedRouteComponent1.vue |
221 |
| - UserCreatedRouteComponent2.vue |
222 |
| - ... |
223 |
| - App.vue |
224 |
| - main.js |
225 |
| - router.js |
226 |
| -babel.config.js |
227 |
| -package.json |
228 |
| -``` |
229 |
| -<br/> |
230 |
| - |
231 |
| -[↥Back to top](#table-of-contents) |
232 | 172 |
|
233 | 173 | ## Installation
|
234 | 174 |
|
|
0 commit comments