Menu
Is there any way to compile .vue file into .js file without webpack or browserify? I know the goodness of webpack or browserify but I just want the simplest way to compile the .vue file. For example, I have a single file component comp.vue complied into comp.js (the compiler should be able to compile sass and pug in .vue file) and then I can use it in my app like below:
<head>
<script src="vue.min.js"></script>
<script src="comp.js"></script> //it may pack the whole component into variable comp and add the style
<script>
Vue.component('comp', comp);
window.onload = function() {
new Vue({el: '#app'});
}
</script>
</head>
<body id='app'>
<comp></comp>
</body>
or other similar/simpler way?
574
To build Vue applications without webpack or some other bundler, we need to write our components without using the SFC syntax. // src/components/App.
Yes. You can add Vue functionality to existing project without Vue CLI. Preferably a project using Webpack as bundler...then it is pretty simple. You need 3 packages: vue@next, @vue/compiler-sfc and vue-loader and add some rule configuration in your webpack.
Does it need to be compiled? If you want to use Vue without compiling, you can add it to an HTML document using a <script> tag. This will register Vue as a global variable. But you'll then need to compile it with your other code using a build tool like Webpack.
You need Node. js, since the libraries required for Vue are downloaded using node package manager (npm).
The vue-cli tool (version 2.8.0) has a build command that you can run to build an individual component.
vue build Component.vue --prod --lib
This will create an optimized bundle in UMD format, and the name of exported library is set to Component, you can use --lib [CustomLibraryName] to customize it.
You can take the built script and include it in your file like you are in your question. Technically it does use webpack under the hood, but you do not have to configure anything.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
