Vue CLI은 Vue.js의 응용 프로그램을 만들기위한 명령 줄 인터페이스 (CLI)를 기반으로하는 개발 도구입니다 ( "Vue CLI 3 입문 01: Vue CLI란 무엇입니까?"참조). 2018년 7월 16일에 v3.0.0-rc.5가 공개되었습니다. 또한 Bootstrap-Vue을 사용하면 Bootstrap 4가 추가 된 프로젝트의 편지지를 쉽게 만들 수 있습니다 (그림 001).

그림 001 ■ Bootstrap-Vue 사이트

Vue CLI 3 설치

먼저 Vue CLI 3을 전역으로 설치합니다( "Vue CLI 3 시작 02: 설치"참조). v3.0.0-rc.5는 릴리스 전(Release Candidate)의 최종 단계입니다. 하지만 이미 이전 버전 ( vue-cli )은 사용하지 않는 것이 좋습니다. (deprecated). 패키지 이름이 @vue/cli로 변경되었으므로 유의하십시오.

npm install -g @vue/cli

macOS에서 관리자 권한이 필요하면 다음과 같이 sudo 명령을 함께 설치하십시오.

sudo npm install -g @vue/cli

Bootstrap-Vue로 프로젝트 만들기

Bootstrap-Vue에는 두 개의 템플릿이 있습니다.

webpack-simple : 간단한 편지지로 테스트 및 작은 응용 프로그램 만들기

webpack : 많은 옵션이있는 제품 용 템플릿으로 편지지 만들기

명령줄 도구로 다음과 같이 입력하면 간단한 템플릿( webpack-simple )으로 프로젝트( my-project )를 만들 수 있습니다. 템플릿을 제품용( webpack )으로 바꾸면 제품용 편지지가 됩니다.

vue init bootstrap-vue/webpack-simple my-project

? Project name my-project
? Project description A Vue.js project
? Author fumio nonaka
? Use sass? Yes

   vue-cli · Generated "my-project".

   To get started:

     cd my-project
     npm install
     npm run dev.

메시지에 표시된 대로 디렉터리를 전환하여 설치한 다음 npm run dev를 입력하면 응용 프로그램이 로컬 서버에서 열립니다.

cd my-project
npm install
npm run dev.

이제 프로젝트 (App.vue) 템플릿에 Bootstrap 4 스타일을 사용할 수 있습니다. 예를 들어 "Buttons"클래스에서 링크를 버튼으로 변경할 수 있습니다(그림 002).

<ul>
  <li><a href="https://vuejs.org" target="_blank"
    class="btn btn-primary">Core Docs</a></li>
  <li><a href="https://forum.vuejs.org" target="_blank"
    class="btn btn-success">Forum</a></li>
  <li><a href="https://gitter.im/vuejs/vue" target="_blank"
    class="btn btn-danger">Gitter Chat</a></li>
  <li><a href="https://twitter.com/vuejs" target="_blank"
    class="btn btn-dark">Twitter</a></li>
</ul>

그림 002 ■ Bootstrap의 Buttons 스타일을 사용할 수 있습니다.