Vue.js Header, Footer, etc... 다른 vue 파일 import하기

내가 찾을 때 못 찾았던 기억에 간단 정리.

경로는 알맞게 수정해서 쓰기.

MainFooter.vue

<template>
  <H1>FOOTER</H1>
</template>
 
<script>
export default {
  name: 'main-footer'
}
</script>
 
<style scoped>
</style>

MainHeader.vue

<template>
  <H1>HEADER</H1>
</template>
 
<script>
export default {
  name: 'main-header'
}
</script>
 
<style scoped>
</style>

App.vue

<template>
  <div id="app">
    <div id="header">
      <main-header/>
    </div>
 
    <img src="./assets/img/logo.png">
    <router-view/>
 
    <div id="footer">
      <main-footer/>
    </div>
  </div>
</template>
 
<script>
import MainHeader from './shared-components/MainHeader.vue'
import MainFooter from './shared-components/MainFooter.vue'
 
export default {
  name: 'App',
  components: {
    'main-header': MainHeader,
    'main-footer': MainFooter
  }
}
</script>
 
<style>
  @import './assets/css/demo.css'
</style>