부트스트랩을 Vue와 함께 사용하는 방법, 예를 들어 부트스트랩 Vue 배우기

Vuejs CLI는 패키지 설치에서 Vuejs 애플리케이션 구성에 이르기까지 많은 기능을 제공합니다. 이 기사에서는 Bootstrap 4를 Vuejs 애플리케이션에 추가하는 몇 가지 방법을 살펴봅니다. 기본적으로 Vue Bootstrap에 대해 자세히 알아보세요.

전제 조건

HTML, CSS 및 JavaScript(ES6+)에 익숙합니다.

개발 시스템에 설치된 VS 코드 또는 코드 편집기.

Vue 기본 지식

기사를 시작하기 전에 best Vue templates from WrapPixel에 대해 특별히 언급하고 싶습니다. 페이지, 대시보드, 차트, 테이블, 양식 등을 바로 사용할 수 있는 vue 기반 애플리케이션을 훨씬 빠르게 만들 수 있습니다. 다운로드할 수 있는 무료 vuejs 템플릿이 있으므로 확인하십시오.

Vuejs 애플리케이션 설정

Vuejs CLI를 사용하여 새로운 Vuejs 애플리케이션을 설정하는 것으로 시작하겠습니다. 터미널에서 다음을 실행하여 로컬 컴퓨터에 Vuejs CLI가 설치되어 있는지 확인하세요.

vue --version

Vuejs 버전을 얻는다면 Vuejs가 설치된 것입니다. 하지만 터미널에서 실행하여 로컬 컴퓨터에 전역적으로 설치하지 않는 경우:

npm install -g @vue/cli

vue create 명령 다음에 프로젝트 이름을 사용하여 새 Vue 프로젝트를 설정합니다.

vue create bootstrap4

그러면 기본 사전 설정을 사용하거나 사전 설정을 수동으로 구성하라는 메시지가 표시됩니다. 계속하려면 기본 사전 설정을 선택하십시오. 이것을 선택하면 새로운 Vuejs 애플리케이션이 생성됩니다. 설치가 완료되면 cd bootstrap4를 입력하여 프로젝트 작업 디렉토리로 이동합니다.

jQuery로 부트스트랩 설정

부트스트랩은 부트스트랩의 핵심 스크립트인 Popper js와 jQuery로 구성됩니다. npm을 사용하여 이 패키지를 설치하고 설정합니다. 이렇게 하려면 터미널을 열고 다음 명령을 실행합니다(프로젝트 작업 디렉터리에 있는지 확인).

npm install bootstrap jquery popper.js

부트스트랩 스타일에만 관심이 있는 경우 npm install bootstrap를 실행하고 jquery 및 popperjs를 무시할 수 있습니다.

설치 후 이 파일을 main.js 파일로 가져와야 합니다.

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

또한 import "bootstrap";를 무시하여 스타일에만 관심이 있는 경우 부트스트랩의 css 파일을 가져올 수 있음을 기억하십시오.

이 작업이 완료되면 이제 component/HelloWorld.vue 구성 요소를 편집하여 코드를 테스트할 수 있습니다.

<template>
  <div>
    <h2>Testing Bootstrap buttons</h2>
    <button class="btn btn-primary">Test</button>
    <button class="btn btn-info">Test</button>
    <button class="btn btn-danger">Test</button>
    <button class="btn btn-secondary">Test</button>
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Hi!</strong> I'm Sunil
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</template>

다음을 실행하여 애플리케이션을 실행할 수 있습니다.

npm run serve

이렇게 하면 포트 8080에서 애플리케이션이 열립니다.

Bootstrap Vue로 부트스트랩 설정

Bootstrap Vue는 Bootstrap 4 구성 요소의 가장 포괄적인 구현 중 하나를 제공합니다. 설치하려면 터미널에서 다음을 실행하십시오.

npm i bootstrap-vue

부트스트랩 Vue를 사용하려면 다음을 실행하여 제대로 작동하도록 부트스트랩을 설치해야 합니다.

npm install boostrap

이것을 설치한 후 작동하려면 main.js 파일에 가져와서 등록해야 합니다.

import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

Booststrap Vue는 프로젝트에 추가할 수 있는 아이콘 플러그인과 함께 제공됩니다.

이제 component/HelloWorld.vue 파일에 다음을 추가하여 부트스트랩 구성 요소 중 일부를 테스트할 수 있습니다.

<div>
  <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Active action</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

이를 설정한 후 계속해서 애플리케이션의 모든 Bootstrap 4 구성 요소를 탐색할 수 있습니다.