main.js
import Vue from 'vue'
import App from './App.vue'
import Header from "./components/Header";
import Footer from "./components/Footer";
Vue.component('Header', Header)
Vue.component('Footer', Footer)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
App.vue
<template>
<div id="app">
<Header></Header>
<router-view></router-view>
<Footer></Footer>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
Header.vue
<template>
<div>
<h2>header</h2>
</div>
</template>
<script>
export default {
name: "Header"
}
</script>
<style scoped>
</style>
Footer.vue
<template>
<div>
<h2>Footer</h2>
</div>
</template>
<script>
export default {
name: "Footer"
}
</script>
<style scoped>
</style>