Bolehkah bootstrap dan vue digunakan bersama?-Soal Jawab bahagian hadapan-php.cn

Bolehkah bootstrap dan vue digunakan bersama?

青灯夜游

Lepaskan： 2021-11-10 10:15:20

asal

11040 orang telah melayarinya

Bootstrap dan vue boleh digunakan bersama-sama Menggunakan bootstrap untuk menulis templat Vue boleh meningkatkan kecekapan pembangunan dan vue secara khusus menyediakan perpustakaan komponen ui BootstrapVue, yang digunakan untuk menggunakan Vue dan Bootstrap4 untuk membina responsif dan mudah alih. bangunan pertama di laman web.

Bolehkah bootstrap dan vue digunakan bersama?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi vue2.9.6&&bootsrap4, komputer DELL G3

bootstrap dan vue boleh digunakan bersama-sama, kedua-duanya Ia serasi dan tidak akan bercanggah Menggunakan bootstrap untuk menulis templat Vue boleh meningkatkan kecekapan pembangunan.

Cara menggunakan Bootstrap dalam Vue

1 Pasang pustaka bootstrap:

Dalam direktori akar projek, masukkan arahan: <.>

npm install bootstrap3 -S

Salin selepas log masuk

Di sini saya memilih versi bootstrap3

2 Kemudian perkenalkan bootstrap dalam fail utama.js

Bolehkah bootstrap dan vue digunakan bersama?

3 templat Struktur komponen html yang disediakan oleh Bootstrap boleh menjadi

Selain itu, anda juga boleh menggunakan rangka kerja BootstrapVue

vue mempunyai perpustakaan komponen ui khusus BootstrapVue, iaitu berdasarkan rangka kerja Bootstrap v4 yang paling popular di dunia, untuk membina tapak web yang responsif dan diutamakan mudah alih di web menggunakan Vue.js.

BootstrapVue ialah rangka kerja UI bahagian hadapan berdasarkan Bootstrap v4 Vue.js. Sebagai rangka kerja pengenalan untuk mempelajari rangka kerja Vue.js itu sendiri, saya rasa BootstrapVue sangat bagus. Rangka kerja Bootstrap itu sendiri adalah ringan, mudah dipelajari dan sangat popular di seluruh dunia dengan banyak pemalam dan gaya tema pihak ketiga. Sebagai rangka kerja progresif, perpustakaan teras Vue.js hanya memfokuskan pada lapisan paparan, yang bukan sahaja mudah untuk dimulakan, tetapi juga mudah untuk disepadukan dengan rangka kerja pihak ketiga atau projek sedia ada.

1. Pasang BootstrapVue

npm install bootstra-vue bootstrap axios

Salin selepas log masuk

Perkenalkan BootstrapVue dan Bootstrap CSS

2 3. Ubah suai src/components/HelloWorld.vue:

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

Salin selepas log masuk

Pembelajaran yang disyorkan: "

tutorial penggunaan bootstrap

<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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bolehkah bootstrap dan vue digunakan bersama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!