Vue에서 Boostrap와 jquery 사용하기

Update! 2019-08-04

Bootstrap Vue가 v2로 업데이트 됨에 따라, 더이상 jQuery가 필요 없어졌다!

이제는 그냥 여기 나온대로 따라하면 된다.

하지만 저것도 귀찮다면, 내가 템플릿을 만들어두었다. 이 레포지토리를 클론받아서 그냥 쓰면 된다.

아래 내용은 참고용으로 지우지 않고 남겨둔다.

끝

---

시작

몇 가지 방법

Vue.js에서 Bootstrap과 jQuery를 사용하려면 약간의 추가 작업이 필요하다. 여기엔 몇 가지 방법이 있다.

1. Bootstrap Vue에서 제공하는 vue cli template을 사용
2. expose-loader 사용: 이 글을 참고할 것
3. webpack을 사용

선택

나는 webpack을 사용하는 방법이 깔끔했다. 이 글을 참고하여 약간 보완했다. 구조는 vue cli의 webpack template를 사용한 프로젝트 기준이다. 각 라이브러리의 버전은 다음과 같다.

1. Bootstrap v4.0.0
2. jQuery v3.3.1
3. popper.js v1.12.9

설치

npm install --save jquery bootstrap popper.js

설정

webpack

#build/webpack.base.conf.js

const webpack = require('webpack')

module.exports = {
  ...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery'
    })
  ]
  ...
}

eslint

#.enlintrs.js

module.exports = {
  ...
  globals: {
    "$": true,
    "jQuery": true
  }
}

import

#src/main.js

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

이제 예쁘게 개발해보자!