Vue Bootstrap 프로젝트 생성

Vue 설치

npm i vue

Vue CLI 설치

Vue CLI는 Vue 개발 환경 설정 도구이며 프로젝트 세팅 및 Vue 명령어를 사용 가능하게 해 줌

npm i -g @vue/cli

Vue 프로젝트 생성

vue init webpack bootvue

위의 명령어를 입력하면, 프로젝트 설정 질문 답변이 나옴

? Project name bootvue ? Project description Bootstrap Vue Project ? Author jess ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) npm

Vue 프로젝트가 생성되었으면, 터미널에서 생성된 프로젝트 폴더로 이동

 

Bootstrap Vue 설치

npm i bootstrap-vue bootstrap --save

 

설치가 완료되었으면 npm run dev로 실행

 

정상적으로 실행되는 것을 확인 후, Bootstrap-vue 컴포넌트 하나를 적용하여 bootstrap이 잘 되는지 확인

 

<template>
    <div>
    <b-card
        title="Card Title"
        img-src="https://picsum.photos/600/300/?image=25"
        img-alt="Image"
        img-top
        tag="article"
        style="max-width: 20rem;"
        class="mb-2"
    >
        <b-card-text>
        Some quick example text to build on the card title and make up the bulk of the card's content.
        </b-card-text>

        <b-button href="#" variant="primary">Go somewhere</b-button>
    </b-card>
    </div>
</template>

Bootstrap이 정상적으로 적용됨

다양한 컴포넌트들은 bootstrap-vue.org/docs/components 에서 확인 가능함