[Vue] Bootstrap 라이브러리

BootStrap

• BootStrap
• 참고 : Bootstrap 5.0 버전 이상은 IE에서 정상적으로 동작하지 않는다. (IE를 고려한다면 4.1버전 사용)

설치 방법

1. CDN

Get started with Bootstrap

• CSS : https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css
• JS : https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js

CSS, JS 파일을 public/html.html 파일에 링크시킨다.
CDN방식은 다른 서버에 있는 파일을 불러오기 때문에 느려질 수 있다.

2. npm

• npm으로 설치하는 경우 기존 미리보기 띄우던 터미널은 종료하고 설치한다. (컨트롤+C)
• npm 패키지를 사용하여 Node.js 기반 앱에 부트스트랩을 설치합니다.

VS code 터미널에 명령어 입력

(5버전 설치 방법)
npm install bootstrap@next @popperjs/core

(4버전 설치 방법)
npm install bootstrap jquery popper.js

(나는 최신버전으로 진행)
npm install bootstrap@5.3.0

설치 후 src/main.js에 두 줄 추가

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

// src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

createApp(App).mount('#app')

bootstrap 문서에 있는 컴포넌트들을 복사, 붙여넣기 하면 ui를 빠르게 만들 수 있다.