Bootstrap은 최근 WEB 프레임 워크로 인기가 급상승했습니다.
Bootstrap 자체는 Jquery와 Popper에 의존하기 때문에 기존 프로젝트에 Bootstrap을 도입 할 때는 먼저 Jquery와 Popper.js를 도입해야합니다.

준비

Vue 프로젝트의 폴더로 이동하여 Jquery와 Popper.js를 설치합니다.

npm install jquery --save-dev
npm install popper.js --save-dev

기존 프로젝트의 webpack.base.conf.js에 Jquery 및 Popper.js 플러그인을 추가합니다.

const webpack = require('webpack')

//jqueryプラグインを追加
plugins: [
　new webpack.ProvidePlugin({
　$: "jquery",
　jQuery: "jquery",
  Popper: ['popper.js', 'default']
})],

기존 프로젝트의 main.js에 Jquery 인용문을 추가합니다.

import $ from 'jquery'

Bootstrap 소개

npm install bootstrap --save-dev

main.js에서 Bootstrap을 가져옵니다.

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

Bootstrap 확인

기존 Vue 프로젝트에 다음 파일을 만들어 Vue 프로젝트를 시작하여 화면에서 Bootstrap이 제대로 작동했는지 확인합니다.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank">Core Docs</a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank">Forum</a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank">Community Chat</a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank">Twitter</a>
      </li>
      <br />
      <li>
        <a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a href="http://router.vuejs.org/" target="_blank">vue-router</a>
      </li>
      <li>
        <a href="http://vuex.vuejs.org/" target="_blank">vuex</a>
      </li>
      <li>
        <a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a>
      </li>
    </ul>
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>
    <div id="cc">cc</div>
  </div>
</template>

<script>
$(function() {
  alert('hello jquery!')
})
export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

결과 화면