bootstrap と vue は一緒に使用できますか?

bootstrap と vue は一緒に使用できます。bootstrap を使用して vue 用のテンプレートを作成すると、開発効率が向上します。vue は特に、Vue と Bootstrap 4 を使用して Web 上で構築するために使用されるブートストラップ UI コンポーネント ライブラリ BootstrapVue を提供します。レスポンシブかつモバイルファーストのウェブサイトです。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6&&bootsrap4 バージョン、DELL G3 コンピューター

bootstrap と vue は併用可能です互換性があり、競合することはありません。ブートストラップを使用して Vue テンプレートを作成すると、開発効率が向上します。

Vue でブートストラップを使用する方法

1. ブートストラップ ライブラリをインストールします:

プロジェクトのルート ディレクトリで、次のコマンドを入力します:

npm install bootstrap3 -S

ここでは bootstrap3 のバージョンを選択します

2 次に、main.js ファイルに bootstrap を導入します

3. に Bootstrap を記述します。テンプレート HTML コンポーネントの構造は次のとおりです。

さらに、BootstrapVue フレームワークを使用することもできます。

vue には、世界の最も人気のあるフレームワーク Bootstrap v4。Vue.js を使用して Web 上に応答性の高いモバイルファーストのサイトを構築します。

BootstrapVue は、Bootstrap v4 Vue.js に基づくフロントエンド UI フレームワークです。 Vue.js フレームワーク自体を学ぶための入門フレームワークとして、BootstrapVue は非常に優れていると思います。 Bootstrap フレームワーク自体は軽量で習得が簡単で、多くのサードパーティのプラグインやテーマ スタイルとともに世界中で非常に人気があります。進歩的なフレームワークである Vue.js のコア ライブラリはビュー レイヤーのみに焦点を当てており、開始が簡単であるだけでなく、サードパーティ フレームワークや既存のプロジェクトとの統合も簡単です。

1. BootstrapVue のインストール

npm install bootstra-vue bootstrap axios

BootstrapVue と Bootstrap CSS の導入

2. src/main.js の変更

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
 
Vue.use(BootstrapVue)
Vue.config.productionTip = true
 
new Vue({
  render: h => h(App),
}).$mount('#app')

3. src の変更/components/HelloWorld.vue:

<template>
  <b-container fluid class="p-4">
    <b-row>
      <b-col sm="3" v-for="item in list" v-bind:key="item.index">
        <b-img thumbnail fluid :src="item.strCategoryThumb" v-bind="mainProps"></b-img>
      </b-col>
    </b-row>
  </b-container>
</template>
 
<script>
import axios from "axios"
 
export default {
  name: &#39;HelloWorld&#39;,
  data() {
    return {
      mainProps: {
        class: &#39;mb-2&#39;
      },
      list: []
    }
  },
  mounted() {
    axios
        .get("https://www.themealdb.com/api/json/v1/1/categories.php")
        .then(response => {
        this.list = response.data.categories
      })
        .catch(err => {
        console.log(err)
      })
  }
}
</script>

推奨される学習: 「ブートストラップの使用方法のチュートリアル」

以上がbootstrap と vue は一緒に使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。