[Vue.js] Blog 프로젝트 생성하기 및 Bootstrap 사용하기

728x90

💡 실습 포인트!

💜 Blog 프로젝트 생성하기

vue-router 를 배우기 위해 Blog 프로젝트를 새로 만들어주었다.
Vue 설치 및 프로젝트 생성, 개발환경 셋팅방법은 이전에 포스팅한 적이 있으므로 이 포스팅에서는 설명하지 않는다.
(Vue 설치 및 프로젝트 생성, 개발환경 셋팅방법이 궁금하다면 여기를 클릭!)

💜 Bootstrap 설치하기

이번에는 vue 에서 Bootstrap 라이브러리를 이용해보았다.
Bootstrap 은 웹페이지에 필요한 버튼, 메뉴, 카드, 리스트 등의 레이아웃을 쉽게 코드를 복사-붙여넣기하는 방식으로 만들 수 있도록 도와주는 라이브러리이다.
Bootstrap 을 설치하는 방법은 다음과 같다.
- css.js 파일을 복사-붙여넣기하여 설치하기
- 터미널에서 npm 을 이용하여 설치하기
- BootstrapVue 를 설치하기 (Vue 2 버전만 호환되는 점 참고!)

🤍 css.js 파일을 복사-붙여넣기하여 Bootstrap 설치하기

Bootstrap 이라고 구글에 검색하면 위와 같이 사이트가 하나 나온다.

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

귀찮으면 위 링크 클릭해서 들어가자..ㅎㅎ

Get started 버튼을 클릭해준다.

이제 위와 같이 화면이 보이면 우측 상단에서 Bootstrap 버전을 선택해준 다음, 위에 표시한 CSS, JS 두 곳의 코드를 복사하여 index.html 에 그대로 붙여넣어주면 된다.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

나는 위와 같이 CSS 코드는 <head></head> 에, JS 코드는 <body></body> 에 넣어주었다.
JS 코드는 </body> 바로 위에 적어주는 것이 좋다.

🤍 터미널에서 npm 을 이용하여 Bootstrap 설치하기

npm 으로 Bootstrap 을 설치할 거면 먼저 프로젝트를 생성한 후, 생성된 프로젝트 폴더를 VSCode 에디터로 열어준 후 진행해야 한다.
혹시, 터미널에서 npm run serve 를 입력하여 프로세스를 켜둔 게 있다면, 그 상태에서 Bootstrap 설치시 제대로 설치가 안 될 수 있으므로 반드시 해당 프로세스를 종료한 후에 Bootstrap 설치를 진행하자.

// Bootstrap 5 버전 설치하는 경우
npm install bootstrap

// Bootstrap 4 버전 설치하는 경우
npm install bootstrap@4 jquery popper.js

위 코드 중 하나를 선택하여 터미널에 입력하면 설치가 진행된다.
참고로 yarn 을 사용하고 싶다면 npm install 대신에 yarn add 라고 입력하면 된다.
설치 명령어는 언제든 수정될 수 있으므로 Bootstrap 홈페이지에서 먼저 확인하는 게 좋다.

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

이제 main.js 파일의 맨 마지막줄보다 상단에 위 두 코드를 추가해주면 된다.

💜 Bootstrap 사용하기

Bootstrap 홈페이지에 접속하여 원하는 UI 를 검색한다.
button, navbar, card 등을 검색하면 html 샘플 코드가 나오는데, 이걸 복사하여 내 프로젝트의 원하는 위치에 붙여넣어주기만 하면 된다.

728x90

'[개발] Practice > Vue.js' 카테고리의 다른 글

[Vue.js] vue-router 설치 후 라우팅하기 (0)	2022.04.05
[Vue.js] 데이터바인딩을 통해 블로그 글목록 만들기 (0)	2022.04.05
[Vue.js] Vue 의 라이프사이클 활용하기 (0)	2022.04.04
[Vue.js] 데이터 원본 보존의 필요성 이해하기 및 상품 정렬 기능 만들기 (0)	2022.04.04
[Vue.js] Vue 에서 UI 애니메이션 효과 주기 (0)	2022.04.03

Extra + Ordinary

[Vue.js] Blog 프로젝트 생성하기 및 Bootstrap 사용하기

💡 실습 포인트!

💜 Blog 프로젝트 생성하기

💜 Bootstrap 설치하기

🤍 css.js 파일을 복사-붙여넣기하여 Bootstrap 설치하기

🤍 터미널에서 npm 을 이용하여 Bootstrap 설치하기

💜 Bootstrap 사용하기

'[개발] Practice > Vue.js' 카테고리의 다른 글

티스토리툴바

[Vue.js] Blog 프로젝트 생성하기 및 Bootstrap 사용하기

💡 실습 포인트!

💜 Blog 프로젝트 생성하기

💜 Bootstrap 설치하기

🤍 css.js 파일을 복사-붙여넣기하여 Bootstrap 설치하기

🤍 터미널에서 npm 을 이용하여 Bootstrap 설치하기

💜 Bootstrap 사용하기

'[개발] Practice > Vue.js' 카테고리의 다른 글

관련글

티스토리툴바