Vue_화면 분할

https://getbootstrap.com/docs/4.6/layout/overview/

Overview

뷰 문서를 확인하여 코드를 구성한다.

 

다음과 같이 Header, Sidebar, Content로 세부분으로 나눈다.

다음의 위치에 각각의 파일을 생성 한다. (파일 내용은 타이틀만 써주자)

Header 파일: /src/components/layout/Header.vue

Sidebar 파일: /src/components/layout/Sidebar.vue

Content 파일: /src/views/Home.vue

NotFound처리 파일도 생성 한다.

NotFound 파일: /src/components/NotFound.vue

App.vue 파일 구조(헤더와 하단 부분)

App.vue파일에서 Header와 하단 부분으로 나눈다.

/src/App.vue

<template>
<div>
<app-header />
<router-view />
</div>
</template>

<script>
import Header from './components/layout/Header'

export default {
  components: {
    'app-header': Header
  }
}
</script><style src="./assets/style/main.css"></style>

index.js 파일 생성(좌측 메뉴와 컨텐츠 부분)

/src/views/index.vue파일을 통해 Sidebar와 Content 두 부분으로 나눈다.

/src/views/index.vue

<template>
  <div>
    <div class="separate-body"></div>
    <b-container fluid style="padding-left: 0px">
      <b-row>
        <!-- Side bar -->
        <b-col cols="2" style="padding-right: 0px">
          <app-sidebar />
        </b-col>
        <!-- Body contents -->
        <b-col style="padding-left: 0px; padding-right: 0px">
          <div class="content-body">
            <router-view />
          </div>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import Sidebar from '../components/layout/Sidebar'

export default {
  components: {
    'app-sidebar': Sidebar
  }
}
</script>

<router-view />부분의 코드를 통해 Router설정 에서 component로 import한 파일이 사용된다.

 

not found code

<template>
  <div style="text-align: center; padding-top: 20px">
    <h1 class="text-60">404</h1>
    <p class="text-36 subheading mb-3">Page not found!</p>
    <p class="mb-5 text-muted text-18">Sorry! The page you were looking for doesn't exist.</p>
    <a class="btn btn-lg btn-primary btn-rounded" href="/">Go back to home</a>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped></style>