【Vue.js】BootstrapVueの開発環境を作る

【Vue.js】BootstrapVueの開発環境を作る

今回はBootstrapVueを使った開発環境の構築方法を解説します。
bootstrap-vue.org
BootstrapVueを使うことによってかっこいいデザインが組み込まれたcomponentが使用できるなど、開発がかなり楽になります。
(元となる環境はVue.js + webpackで作成したアプリケーションになります。)

目次

VueCLIでプロジェクト作成

BootstrapVue導入

サンプル画面の作成

コンテンツ

VueCLIでプロジェクト作成

元となるプロジェクト作成は以下のページで解説しています。(数分で終わります)
www.sky-limit-future.com

BootstrapVue導入

プロジェクトを作成したら、プロジェクト内でBootstarpを使えるようにします。
該当プロジェクトに移動し、ターミナルで以下のコマンドを実行してください。

npm install vue bootstrap-vue bootstrap

成功すれば以下のように表示されます

1. bootstrap@4.5.2
2. vue@2.6.12
3. bootstrap-vue@2.17.3

added 8 packages and updated 1 package in 7.054s

成功したら、プロジェクトの「/src/main.js」を変更します。

変更前

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

ここに5行追加します(コメント除く)

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)

変更後

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

// add
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.productionTip = false

// add 
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

これで完成です。実際に使えるかどうか試してみます。

サンプル画面の作成

今回はプロジェクト作成時にデフォルトで作成されるHelloWorld.vueファイルを上書きしていきます。
場所は以下の通りです。

/src/components/HelloWorld.vue

HelloWorld.vue

変更前はどうでもいいので、まず以下のようにします。

<template>
  <div class="hello">
    <div>このエリアを編集していきます</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

試しに以下のcomponentsを使ってみます。
bootstrap-vue.org
カード形式ですね。
HelloWorld.vueを以下のように変更しました。

<template>
  <div class="hello">
    <div>
      <b-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>
          テストのテキストです！
        </b-card-text>
      </b-card>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

これで画面を開くと以下のようになりました。

BootstrapVueの導入完了！

ちゃんと使えていますね。
これで完了となります。