Vue.js에 Bootstrap을 적용하는 방법

소개

Bootstrap에는 Vue 전용의 것이 있어, 태그도 독자적인 것이 존재하기 때문에 자신과 같은 돌출 엔지니어에게 공유하고 싶어서 이 기사를 작성했습니다.
Bootstrap을 적용시키는 방법은 종래와 같이 class="btn" 등이라고 기입하는 방법과, vue 독자적인 <b-button> 등의 태그를 사용하는 방법과 2 종류가 있으므로, 어느쪽이나 해설해 갑니다.

Vue에 Bootstrap 설치

우선 Bootstrap에는 Vue 전용 물건이 있으므로 그곳을 설치합시다.
터미널 or 명령 프롬프트를 열고,

cd vue-app // Bootstrapを適用させたいVueプロジェクトに移動
yarn add bootstrap-vue

이제 ok.
npm의 경우 yarn add

npm install bootstrap-vue

클래스에서 Bootstrap을 사용하는 경우

Bootstrap을 템플릿에서 사용할 수 있도록 허용

src/main.js에 아래 설명을 추가합니다.

main.js

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css' // add
import 'bootstrap-vue/dist/bootstrap-vue.css' // add
Vue.config.productionTip = false

이제 준비는 괜찮습니다. 그리고는 종래대로 써 갈 뿐.

확인해보기

src/App.vue에 버튼을 표시합시다.

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <button class="btn btn-primary">bootstrap</button>
  </div>
</template>

표시를 확인해 봅시다.


문제없이 버튼이 표시되는 것을 확인할 수있었습니다.
당연합니다만, Vue가 아니고 보통으로 HTML/CSS를 쓸 때는 이쪽의 기술 방식으로 가게 됩니다.

<태그>에서 Bootstrap을 사용하는 경우

여기에서는 Vue 자신의 Bootstrap을 사용해 보겠습니다.
덧붙여서, 각 태그의 템플릿은 공식 여기에 있습니다.
h tps : // 보오 tst 등 p ゔ 네. js. rg/

Bootstrap을 템플릿에서 사용할 수 있도록 허용

src/main.js에 아래 설명을 추가합니다.

main.js

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue' // add
import 'bootstrap/dist/css/bootstrap.css' // add
import 'bootstrap-vue/dist/bootstrap-vue.css' // add
Vue.use(BootstrapVue) // add
Vue.config.productionTip = false

방금 전과 다른 점은

import BootstrapVue from 'bootstrap-vue'

그리고 그것을 사용할 수있게하기 위해

Vue.use(BootstrapVue)

설명이 추가되었습니다.

확인해보기

src/App.vue에 버튼을 표시합시다.

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <button class="btn btn-primary">bootstrap</button>
    <b-button variant="primary">bootstrap</b-button>
  </div>
</template>

차이점을 비교하면 class="btn"가 <b-button></b-button>로 대체되고 class="btn-promary"가 variant="primary"로 대체되었습니다.
그럼 표시를 확인해 봅시다.


마찬가지로 버튼이 표시되는 것을 확인할 수 있었습니다.

사이고에게

여기까지 읽어 주셔서 감사합니다.
누군가의 참고가 되면 기쁩니다.
오자 탈자 · 발신 한 정보에 실수가 있으면 지적 해 주시면 감사하겠습니다
또한 설명에 이해하기 어려운 점이 있으면 개선하겠습니다.