A Python3/Binary script to convert .html, and .css structure into .vue structure recursively in a directory.
- Make sure you have Python3, Nuitka, and a compatiable C compiler installed.
- Run the
build.shscript with the path of the python source code as the only argument:./build.sh vueify.py. - This will create a
./distdirectory containing thevueifybinary and resource files.
- Open Bootstrap Studio.
- Open the Export Settings dialogue.
- Expand the Advanced area.
- Browse and select the
vueifybinary. - Run your export as normal.
- Open a terminal.
- Navigate to the directory containing
vueify.py. - Execute the following:
python vueify.py directory_containing_html_files.
- Open a terminal.
- Navigate to the directory containing
vueifybinary. - Execute the following:
./vueify directory_containing_html_files.
If the .vue does not exist, it will create a new one, else it will only replace the <template></template> contents. Not all files will work – if there are unknown encodings, vueify will fail.
example.html:
<html><head><title>An example</title><metacharset="utf-8"></head><body><div><p>Hello World!</p></div></body></html>./assets/css/example.css
.a {
color: red;
}
.b> .a {
color: blue;
}example.vue:
<!-- HTML --><template><div><p>Hello World!</p></div></template><!-- JS --><script>exportdefault{}</script><!-- CSS --><stylescoped="">
.a {
color: red;
}
.b> .a {
color: blue;
}
</style>