Skip to content

FrancescoSaverioZuppichini/DrawIo2Vuejs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Draw.io to Vuejs

A faster way to build web-app by using draw.io to draw your Vuejs app

Installation

$ npm i -g graph2app-drawio2vuejs

Before starting

Before starting you can read the medium article for a step by step guide:

https://medium.com/@FrancescoZ/from-draw-io-to-vue-js-app-c0f84ede8383

Or watch this little demo:

https://www.youtube.com/watch?v=ktnOmnHjDns&feature=youtu.be

Quick start

Go to draw.io create a new file and use the UML objects in order to create your components tree. Be aware, use only the labelled as an object (the fist one). alt text

You can use arrows to link the components, the relation parent-children is express by having an arrow from the children to the parent alt text

If you want to also inclued a file into your component you need to use the specific arrow use alt text

That means that, for example, the file Home.vue will import file User.vue.

Once you have finished your application you must export it as XML not compressed

Then, to create your components, open the terminal and type

drawio2vuejs --xml=<pathToYourXml> --dist=<pathToYourVuejsApp>

For help

drawio2vuejs --help

Pro Tip

You can fast use the vue-cli in order to create an app and then use our program to ovveride App.vue and the components folder.

About

A faster way to create a Vuejs app by using draw.io

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published