Vue 프로젝트 Footer

 

Vue 프로젝트 Footer

 

1. /src/components/Footer.vue 생성

<template>
  <footer>
    <Logo />
    <a
      href="https://github.com/HyungJun-Yoo"
      target="_blank">
      (c){{ new Date().getFullYear() }} ITBlue
    </a>
  </footer>
</template>

<script>
import Logo from '~/components/Logo'
export default {
  components: {
    Logo
  }
}
</script>

<style lang="scss" scoped>
footer {
  padding: 70px 0;
  text-align: center;
  opacity: .3;
  .logo {
    display: block;
    margin-bottom: 4px;
  }
}
</style>

 

2. /src/App.vue 수정

- Footer 연결

<template>
  <Header />
  <RouterView />
  <Footer />
</template>

<script>
import Header from '~/components/Header'
import Footer from '~/components/Footer'

export default {
  components: {
    Header,
    Footer
  }
}
</script>

... 생략

 

결과