Bolehkah bootstrap dan vue digunakan bersama?

青灯夜游
Lepaskan: 2021-11-10 10:15:20
asal
10993 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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan