You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<pclass="tutorialContent">If you ever want to navigate back to this page, click the gear icon <imgstyle="vertical-align:middle"alt="Gear"src="../../../assets/gear.png"class="tut-image"> in the top navigation bar, all the way to the right, and select "Getting Started"
10
+
<pclass="tutorialContent">If you ever want to navigate back to this page, click the gear icon <img
11
+
style="vertical-align:middle"alt="Gear"src="../../../assets/gear.png"class="tut-image"> in the top navigation
12
+
bar, all the way to the right, and select "Getting Started"
10
13
to return to the landing page.
11
14
</p>
12
-
<pclass="tutorialContent">Almost any action in OverVue can be reversed with 'undo' or recreated with 'redo' <imgstyle="vertical-align:middle"alt="Undo-redo"src="../../../assets/undo_redo.png"class="tut-image"> found on
13
-
the left side of the top navigation bar. You can also utilize keyboard shortcuts (cmd-z or ctrl-z to undo; cmd-y or ctrl-y to redo) to accomplish the same thing as clicking the buttons.
15
+
<pclass="tutorialContent">Almost any action in OverVue can be reversed with 'undo' or recreated with 'redo' <img
16
+
style="vertical-align:middle"alt="Undo-redo"src="../../../assets/undo_redo.png"class="tut-image"> found on
17
+
the left side of the top navigation bar. You can also utilize keyboard shortcuts (cmd-z or ctrl-z to undo; cmd-y
18
+
or ctrl-y to redo) to accomplish the same thing as clicking the buttons.
14
19
</p>
15
-
<pclass="tutorialContent">There are three additional buttons on the top navigation bar to utilize: Save, Import and Export.
20
+
<pclass="tutorialContent">There are three additional buttons on the top navigation bar to utilize: Save, Import and
21
+
Export.
16
22
</p>
17
23
<pclass="tutorialContent">
18
-
<imgstyle="vertical-align:middle"alt="save"src="../../../assets/save.png"class="tut-image">Save your OverVue project progress as a JSON file to access it again later<br>
19
-
<imgstyle="vertical-align:middle"alt="import"src="../../../assets/import.png"class="tut-image">Open an existing JSON project file or import an existing Vue component <br>
20
-
<imgstyle="vertical-align:middle"alt="export"src="../../../assets/export.png"class="tut-image">Export boilerplate code for your whole project or a single component<br>
24
+
<imgstyle="vertical-align:middle"alt="save"src="../../../assets/save.png"class="tut-image">Save your OverVue
25
+
project progress as a JSON file to access it again later<br>
26
+
<imgstyle="vertical-align:middle"alt="import"src="../../../assets/import.png"class="tut-image">Open an
27
+
existing JSON project file or import an existing Vue component <br>
<pclass="tutorialContent">You can find all of your routes in the Routes tab. To add a route, enter the name in the input field and click the ‘+’, or press enter. Once added, you can click on a route to navigate to it. To delete a route, click on the ‘x’ on the right side of the route block. (Note: The default route HomeView cannot be deleted.)
35
+
<pclass="tutorialContent">You can find all of your routes in the Routes tab. To add a route, enter the name in the
36
+
input field and click the ‘+’, or press enter. Once added, you can click on a route to navigate to it. To delete a
37
+
route, click on the ‘x’ on the right side of the route block. (Note: The default route HomeView cannot be
<pclass="tutorialContent">You can upload a design mockup in the Routes tab of the right sidebar menu (one mockup per route). Select the route in the Routes tab, open the ‘Upload Mockup’ sub-menu and click ‘Upload Mockup’. To clear the image, click the ‘Clear Image’ button.
42
+
<pclass="tutorialContent">You can upload a design mockup in the Routes tab of the right sidebar menu (one mockup
43
+
per route). Select the route in the Routes tab, open the ‘Upload Mockup’ sub-menu and click ‘Upload Mockup’. To
<pclass="tutorialContent">You can find a visualization of your app hierarchy in the Project Tree tab of the right sidebar. Routes are blue, components are green. You can also navigate to a component or route by clicking on it in the project tree.
48
+
<pclass="tutorialContent">You can find a visualization of your app hierarchy in the Project Tree tab of the right
49
+
sidebar. Routes are blue, components are green. You can also navigate to a component or route by clicking on it in
<pclass="tutorialContent">Under the component details tab, you can access details about the active/selected component - including a code snippet (live generated boilerplate code), the HTML elements, state, actions or props in the component.
54
+
<pclass="tutorialContent">Under the component details tab, you can access details about the active/selected
55
+
component - including a code snippet (live generated boilerplate code), the HTML elements, state, actions or props
<pclass="tutorialContent">In the left sidebar, you’ll find the Component and Store tabs:</p>
41
60
42
61
<hclass="tutorial-sub-heading">Creating a component from scratch</h>
43
-
<pclass="tutorialContent">Under the Create Component menu in the left sidebar, set a component name (required) and optionally select a parent component, and/or html elements to be nested inside the component (see Advanced Functionality to add deeper nesting to html elements).
62
+
<pclass="tutorialContent">Under the Create Component menu in the left sidebar, set a component name (required) and
63
+
optionally select a parent component, and/or html elements to be nested inside the component (see Advanced
64
+
Functionality to add deeper nesting to html elements).
<hclass="tutorial-sub-heading">Editing a component</h>
47
-
<pclass="tutorialContent">To update a component, select the component on the canvas and an Update Component menu will appear in the left sidebar. To update the name, enter the new name in the field and click enter.
68
+
<pclass="tutorialContent">To update a component, select the component on the canvas and an Update Component menu
69
+
will appear in the left sidebar. To update the name, enter the new name in the field and click enter.
48
70
</p>
49
71
<hclass="tutorial-sub-heading">Deleting a component</h>
50
-
<pclass="tutorialContent">To delete a component, select it and click ‘Delete Currently Selected’ in the Update Component menu or press the delete key.
72
+
<pclass="tutorialContent">To delete a component, select it and click ‘Delete Currently Selected’ in the Update
0 commit comments