[Vue] Vue.js 게시판 만들기 3 - 레이아웃 분할

Frontboard 레이아웃 분할

프로젝트 레이아웃을 header / contents / footer로 분할하고 header에 페이지를 이동할 수 있는 버튼을 추가하겠습니다.

먼저 App.vue 파일을 열어 프로젝트 레이아웃을 분할하고 헤더와 푸터로 사용할 컴포넌트등을 추가합니다.

<template>
  <PageHeader/> <!-- 헤더 컴포넌트 -->
  <router-view/>  <!-- 페이지 이동이 표시될 곳 -->
  <PageFooter/> <!-- 푸터 컴포넌트 -->
</template>

<script>
import PageHeader from '@/components/PageHeader'
import PageFooter from '@/components/PageFooter'

export default {
  name: 'App',
  components: {
    PageFooter,
    PageHeader
  }
}
</script>

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

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

src/components/아래에 PageHeader.vue 와 PageFooter.vue 파일을 생성합니다.

<!-- PageHeader.vue -->
<template>
  <header>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/board/list">게시판</router-link>
    </div>
  </header>
  <hr/>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

<!-- PageFooter.vue -->
<template>
  <hr/>
  <footer>
    여기는 footer 자리입니다.
  </footer>
</template>

<script>
export default {}
</script>

<style scoped>

</style>

서버를 부팅하고 화면을 확인합니다.

npm run serve

페이지 이동 구현 (Vue-router)

페이지 이동을 지원하는 vue-router를 설치합니다.

npm i --save vue-router

src/router 폴더를 생성하고 index.js 파일을 생성하여 아래 소스를 추가합니다.

import { createRouter, createWebHistory } from 'vue-router'
import PageHome from '@/views/PageHome.vue'

const routes = [
  {
    path: '/',
    name: 'PageHome',
    component: PageHome
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/PageAbout.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

src/views 폴더를 생성하고 PageHome.vue 와 PageAbout.vue를 생성합니다.

<!-- PageHome.vue -->
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'PageHome',
  components: {
    HelloWorld
  }
}
</script>

<!-- PageAbout.vue -->
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

src/main.js 파일에서 vue-router를 사용하도록 아래 소스로 변경합니다.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router).mount('#app')

에러 없이 잘 실행되는지 페이지를 열어 확인합니다.

현재까지의 vue-frontboard 프로젝트 구성입니다.