[Vue] BootStrap 적용하기

1. css, js설정파일에 link추가하기

https://getbootstrap.com/docs/4.6/getting-started/introduction/

1) 우상단에 사용하고자 하는 버전을 선택

• 5버전 이상은 Internet Explorer에 적용 불가

2) BootStrap-Getting Started-CSS, JS목차의 link, script파일들을
내가 생성한 vue파일-public-index.html에 붙여넣기

4점대 버전

CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

2. npm으로 설치

1. VScode에서 내가 생성한 vue폴더 오픈
2. 터미널 열기(서버사 돌아가는 중이었다면 종료(ctrl+c 또는 휴지통)해야함)
3. 터미널에 설치 명령어 입력(아래 내용은 바구리 수 있으므로 getbootstrap.com에서 확인)

//5버전
npm install bootstrap@5
//4버전
npm install bootstrap@4 jquery popper.js

4. main.js파일에 import

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

3. 번외-extension BootstrapVue설치(Vue 2버전만 호환됨)

4. 대체 Vuetify