vue + jpa project (5) - Vue 레이아웃 정의

이제 Vue 프로젝트에서 레이아웃 화면을 구성한다.

실제 업무용 레이아웃을 구성하기에는 어려움이 있어서 일단 상위에서 차례로 헤더, 메뉴, 홈, 푸터로 구성하기로 한다.

기본 관련된 콤포넌트 파일은 compnents/common 폴더에 넣는 것으로 한다. 홈 화면은 기존 것을 사용한다.

 

1. 콤포넌트 추가 

    [ 헤더 ]

    components/common/MainHeader.vue

<template>
  <div align="right">
    <router-link to='/login'>로그인</router-link>
  </div>
</template>

<script>
export default {
  name: 'MainHeader'
}
</script>

    [ 메뉴바 ]

    components/common/MenuBar.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/board/list">게시판</router-link>
  </div>
</template>

<script>
export default {
  name: 'MenuBar'
}
</script>

    [ 푸터]

    components/common/Footer.vue

<template>
  <div align="center">
    <p>© 2019 ALL RIGHT RESERVED</p>
  </div>
</template>

<script>
export default {
  name: 'Footer'
}
</script>

2. 최상단의 App.vue 에 레이아웃을 구성한다.

<template>
  <div id="app">
    <MainHeader />
    <MenuBar />
    <router-view/>
    <Footer />
  </div>
</template>

<script>
import MainHeader from '@/components/common/MainHeader.vue'
import Footer from '@/components/common/Footer.vue'
import MenuBar from '@/components/common/MenuBar.vue'

export default {
  name: 'App',
  components: {
      MainHeader,
      MenuBar,
      Footer
    }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 모두 처리가 되었다면 그냥 화면을 다시 (열어)보자. 

이렇게 뜨면 반영이 잘 된 것이다.