나루하야 Vue SPA 입문: Bootstrap

Vue CLI3에서 작성한 SPA(Single Page Application) 프로젝트에서 단계적으로 Vue.js를 배우십시오.

목차는 이쪽

이번은 Bootstrap 편입니다.

전제 사항

Vue.js devtools 편 가 완료되고 있는 것.

Bootstrap

부품편에서 만든 TODO 목록에 CSS 프레임 워크 인 Boostrap을 적용하여 디자인을 변경해보십시오.

먼저 bootstrap 관련 구성 요소를 추가합니다.

yarn add bootstrap jquery popper.js

main.js에서 bootstrap을 import합니다.

main.js

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

TodoInputText.vue의 input 태그를 다음과 같이 수정합니다.

TodoInputText.vue

<template>
  <!-- class の指定を追加 -->
  <input
    type="text"
    class="form-control"
    v-model="value"
    @change="onChange($event.target.value)"
    placeholder="Add Todo"
  >
</template>

TodoListItem.vue 의 button 태그를 다음과 같이 수정합니다.

<template>
  <li>
    {{ todo.text }}
    <!-- class の指定を追加 -->
    <button
      class="btn btn-light btn-sm"
      @click="$emit('remove', todo.id)"
    >x</button>
  </li>
</template>

아래와 같이 버튼과 텍스트 입력 항목의 디자인이 바뀌었습니다.

다음 번

ゔ그림x