영상 참고 : 1시간에 vue.js 배우기

VS Code를 사용할 때는 확장기능으로 vue를 설치하는 것이 좋습니다.

초기 디렉토리 구조 설명

router 추가 및 변경된 디렉토리 구조 설명

router에 대한 설명은 # App.vue 에서 확인해주세요.

.vue 코드 기본구조

<template>
  <div>
    <h1>Welcome to Home!</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

각 각의 역할에 대해서는 해당 링크를 참고하는 것이 좋다고 생각합니다.

BootstrapVue

Vue도 별도의 Bootstrap이 존재합니다.
링크 : BootstrapVue

* main.js 추가될 내용

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

App.vue

<template>
  <div id="app">
    <Header/>
    <div id="content" class="content">
      <router-view></router-view>
    </div> 
  </div>
</template>

<template> 구조는 기본적으로 이렇게 구성되어 있습니다.
여기서

는 아래의 <script>문에서 컴포넌트 선언을 해서 직접 Header.vue에 접근한 페이지를 가져오게 됩니다.
Header.vue에는 bootstrapVue에서 선언 된 Navbar 이 <template>에 코딩되어 있습니다.

div 부분에는 콘텐츠가 적용될 부분입니다.
상단의 Header.vue
중단의 Content로 <router-view></router-view>언되어 있는데 이는 router.js 를 참조합니다.

rounter를 사용하기 위해선 설치와 준비작업이 필요하게 됩니다.

router 적용

* 명령어 입력

npm install vue-router --save

* router.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./views/Home";
import About from "./views/About";

Vue.use(VueRouter); // VueRouter를 사용하겠다.

const router = new VueRouter({
    mode: "history",
    routes: [{
            path:"/", 
            component: Home
        },
        {
            path:"/about", 
            component: About
        }
    ]
});

export default router;
views 디렉토리에 있는 컴포넌트인 Home.vue, About.vue를 가져와 path로 경로를 맞춰줍니다.

* main.js

import router from './router'

/// router가 우리 앱을 mount할 때 app을 쓸 수 있는 구조
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

기존에는 router가 없었는데, app을 mount즉, 디렉토리에 접근할 때마다 router가 실행되게 된다고 생각합니다.

결과

해당 프로젝트 경로로 접속하여 npm run serve

* path : /

* path : /About