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>
<meta charset="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>
export default {}
</script>
<!-- CSS -->
<style scoped="">
.a {
color: red;
}
.b > .a {
color: blue;
}
</style>