|
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