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.
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
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 BootstrapVuenpm install bootstra-vue bootstrap axios
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')
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: 'HelloWorld', data() { return { mainProps: { class: 'mb-2' }, 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>
Atas ialah kandungan terperinci Bolehkah bootstrap dan vue digunakan bersama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!