Vue 영화검색사이트 기본 설치 파일

1.라이브러리 설치

npm i vue-router vuex bootstrap@5
npm i -D node-sass sass-loader

 

2. bootstrap 커스터마이징

- scss/main.scss 작성

- 오류 방지를 위해 maps는 주석 처리

// Required
@import "../../node_modules/bootstrap/scss/functions";

// Default variable overrides
$primary:#FDC000; //variables가 실행되기 전에 재정의되어야 함

// Required
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/root";
// @import "../../node_modules/bootstrap/scss/maps";

@import "../../node_modules/bootstrap/scss/bootstrap.scss";

 

3. Bootstrap navigation 버튼의 Pill 활성화(active) 예시

- components/Header.vue

<template>
  <header>
    <div class="nav nav-pills">
      <div v-for="nav in navigations"
        :key="nav.name"
        class="nav-item">
        <RouterLink 
          :to="nav.href"
          active-class="active"  
          class="nav-link">
          <!-- bootstrap의 nav Pill속성의 Active 클래스인 "active"로 지정 -->
          {{ nav.name }}
        </RouterLink>
      </div>
    </div>
  </header>
</template>

<script>
export default{
  data() {
    return {
      navigations:[
        {
          name:'Search',
          href:'/'
        },
        {
          name:'Movie',
          href:'/movie'
        },
        {
          name:'About',
          href:'/about'
        }
      ]
    }
  }
}
</script>