Vue中layout

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>