I created a hello.vue file, now how to use this in a html file? I already setup a webpack,
<template>
<p>Hello</p>
<p>{{message}}</p>
</template>
<script>
module.exports = {
data: {
message: 'hello'
}
}
</script>
<style>
p {
font-size: 14px
}
</style>
How do you want to use it?
Taking demonstation from official example: vue-hackernews-2.0. This is a component, so you import the component in another vue file like this:
import Comment from '../components/Comment.vue'
and you add in the list of components in that vue instance:
components: { Spinner, Comment },
Than you can use it in HTML like this:
<comment v-for="id in item.kids" :key="id" :id="id"></comment>
new Vue({...})You just have to include your bundled .js file in your HTML file and include mounter div - so Vue could know where to execute the app.
Your index file could looks something like this (showing only body section)
...
<body>
<div id="app"></div>
<script src="bundle.js">
</body>
...
Your main Vue file could looks like this:
import Vue from 'vue'
import Hello from 'hello.vue'
const app = new Vue({
render: (h) => h(Hello)
}).$mount('#app')
And in this way you can store all other components into the hello.vue.
This is probably way that you should use when you are building SPA.
