bootstrap-vue 설치

https://bootstrap-vue.js.org/docs

 

vue.js에서 jquery없이 bootstrap을 사용하기 위해 bootstrap-vue를 설치 하려고 한다. 

적용하려는 프로젝트로 이동 후, 아래 명령어 실행. 

npm install bootstrap-vue bootstrap

 

 

프로젝트의 main.js 에 아래 코드 추가

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

 

 

전체 소스

 

정상 적용 확인을 위하여 보여주고자 하는 페이지에 예제코드 추가

    <b-list-group>
      <b-list-group-item>Cras justo odio</b-list-group-item>
      <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
      <b-list-group-item>Morbi leo risus</b-list-group-item>
      <b-list-group-item>Porta ac consectetur ac</b-list-group-item>
      <b-list-group-item>Vestibulum at eros</b-list-group-item>
    </b-list-group>

 

https://bootstrap-vue.js.org/docs/components/list-group/#list-group

BootstrapVue