BootstrapVueでVue.jsでBootstrap4を使用する方法

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

序章

Bootstrap は、Webアプリケーションを構築するための一般的なユーティリティを提供するライブラリです。

このチュートリアルでは、BootstrapVueを使用してVueプロジェクトにBoostrapを追加する方法を紹介します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

Vueのコンポーネントと小道具に精通していること。
Bootstrapコンポーネントとユーティリティの使用にある程度精通していると有益な場合がありますが、必須ではありません。

このチュートリアルは、ノードv15.11.0、npm v7.6.1、vue v2.6.11、bootstrap v4.6.0、およびbootstrap-vuev2.21.2で検証されました。。

ステップ1—プロジェクトの設定

プロジェクトをすばやく設定するために、この記事では @ vue /cliの使用をお勧めします。

注：この記事では、npxを使用して、@vue/cliのグローバルインストールを回避する方法を採用します。

npx @vue/cli create vue-bootstrap-example  --default

新しく作成されたプロジェクトディレクトリに移動します。

cd vue-bootstrap-example

bootstrapおよびbootstrap-vueは、次のコマンドを使用してnpmからインストールできます。

npm install bootstrap@4.6.0 bootstrap-vue@2.21.2

次に、コードエディタでmain.jsファイルを開きます。 bootstrap-vueをインポートして使用します：

src / main.js

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import App from './App.vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.productionTip = false

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

new Vue({
  render: h => h(App),
}).$mount('#app')

このコードにより、ブートストラップスタイルとアイコンをVueアプリケーション全体で使用できるようになります。

ステップ2—Vueコンポーネントの使用

ブートストラップカード、タブ、およびボタンを利用するコンポーネントの例を次に示します。

src / components / BootstrapExample.vue

<template>
  <b-card
    title="Card Title"
    sub-title="Card Subtitle"
    style="max-width: 20rem;"
  >
    <b-tabs>
      <b-tab title="Tab 1">
        <b-card-text>Tab 1 Contents</b-card-text>
      </b-tab>
      <b-tab title="Tab 2">
        <b-card-text>Tab 2 Contents</b-card-text>
        <b-button
          size="md"
          variant="primary"
        >
          Button
        </b-button>
      </b-tab>
      <b-tab title="Tab 3" disabled>
        <b-card-text>Tab 3 Contents</b-card-text>
      </b-tab>
    </b-tabs>
  </b-card>
</template>

<script>
export default {
  name: 'BootstrapExample'
}
</script>

このコードは、タイトル、サブタイトル、および3つのタブを持つカードを生成します。タブには、「タブ1」、「タブ2」、「タブ3」というラベルが付けられます。 3番目のタブはdisabledになります。タブを操作すると、それぞれの内容が表示されます。 2番目のタブには、「ボタン」というタイトルのボタンも含まれます。

結論

このチュートリアルでは、BootstrapVueを使用してVueプロジェクトにBoostrapを追加する方法を紹介しました。

使用可能なコンポーネントと機能の詳細については、ドキュメントを参照してください。

Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036