[VUE] bootstrap 설치하기 (npm으로 설치)

웹 사이트를 제작할 때 실질적인 내용을 넣는 것보다 디자인을 하는데 상당히 많은 시간이 걸리곤 합니다. 부트스트랩(bootstrap)을 활용하면 이미 예쁘게 만들어진 페이지 구성 요소들을 쉽게 갖다 쓸 수 있습니다. 오늘은 vue 프로젝트에 부트스트랩을 설치하는 방법에 대해 살펴보도록 하겠습니다. npm으로 설치할 것입니다. 

 

Node.js에서 다음과 같은 명령을 실행하면 부트스트랩을 설치할 수 있습니다. 참고로 부트스트랩 현재 최신 버전은 v5.2.0입니다. 관련된 공식 문서 링크도 남겨놓겠습니다.

- https://getbootstrap.com/docs/5.2/getting-started/download/ 

 

npm install bootstrap@5.2.0

 

이렇게 설치해주고 나서 main.js 상단에 아래 두 줄의 코드만 추가하면 부트스트랩을 사용할 수 있습니다. 

 

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

 

자, 이제 신나게 부트스트랩으로 웹 페이지를 꾸미면 됩니다.

 

관련 글

- vue cli 설치 및 vue 프로젝트 생성 방법 정리