웹 사이트를 제작할 때 실질적인 내용을 넣는 것보다 디자인을 하는데 상당히 많은 시간이 걸리곤 합니다. 부트스트랩(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'
자, 이제 신나게 부트스트랩으로 웹 페이지를 꾸미면 됩니다.
관련 글
'Dev > javascript' 카테고리의 다른 글
| [javascript] 배열의 원소 중 하나 랜덤 선택하기 (0) | 2023.04.27 |
|---|---|
| [jsrender] else if 문 처리 방법 (4) | 2023.04.23 |
| [jsrender] for문 슬라이싱 범위 지정하는 방법 (0) | 2023.04.21 |
| [jQuery] 클릭된 html 요소의 텍스트를 추출하는 방법 (0) | 2023.04.12 |
| [javascript] 문자열이 특정 문자열로 시작하는지 확인하기, 문자열.startsWith() (0) | 2022.08.30 |
| [VUE] 컴포넌트 이름은 multi-word이어야 한다고 합니다 (0) | 2022.08.21 |
| vue cli 설치 및 vue 프로젝트 생성 방법 정리 (4) | 2022.08.20 |
| [jQuery] 특정 요소에 담긴 text 정보 얻기, text() 메서드 (0) | 2022.07.28 |