Können Bootstrap und Vue zusammen verwendet werden?

Bootstrap und Vue können zusammen verwendet werden, um die Entwicklungseffizienz zu verbessern. Vue bietet speziell eine Bootstrap-UI-Komponentenbibliothek, mit der Vue und Bootstrap4 zum Erstellen reaktionsfähiger, mobiler Websites verwendet werden können Web.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue2.9.6 und Bootsrap4-Version, DELL G3-Computer. Bootstrap und Vue können zusammen verwendet werden und es kommt nicht zu Konflikten bei der Verwendung von Bootstrap Denn Vue kann die Entwicklungseffizienz verbessern.

So verwenden Sie Bootstrap in Vue

1. Installieren Sie die Bootstrap-Bibliothek:

Geben Sie im Stammverzeichnis des Projekts den Befehl ein:

npm install bootstrap3 -S

Hier wähle ich die Bootstrap3-Version

2 und dann im main.js-Datei Führen Sie Bootstrap ein

3. Schreiben Sie einfach die von Bootstrap bereitgestellte HTML-Komponentenstruktur in die Vorlage

Darüber hinaus können Sie auch das BootstrapVue-Framework verwenden

vue verfügt über eine dedizierte UI-Komponentenbibliothek BootstrapVue , das auf dem weltweit beliebtesten Framework Bootstrap v4 zum Erstellen reaktionsfähiger, für Mobilgeräte optimierter Websites im Web mithilfe von Vue.js basiert.

BootstrapVue ist ein Front-End-UI-Framework, das auf Bootstrap v4 + Vue.js basiert. Als Einstiegsframework zum Erlernen des Vue.js-Frameworks selbst halte ich BootstrapVue für sehr gut. Das Bootstrap-Framework selbst ist leichtgewichtig, leicht zu erlernen und mit vielen Plugins und Theme-Stilen von Drittanbietern auf der ganzen Welt sehr beliebt. Als progressives Framework konzentriert sich die Kernbibliothek von Vue.js nur auf die Ansichtsebene, die nicht nur einfach zu starten ist, sondern auch leicht in Frameworks von Drittanbietern oder bestehende Projekte integriert werden kann.

1. Installieren Sie BootstrapVue

npm install bootstra-vue bootstrap axios

Führen Sie BootstrapVue und Bootstrap CSS ein

2. Ändern Sie src/components/HelloWorld.vue:

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 zur Bootstrap-Nutzung

》

Das obige ist der detaillierte Inhalt vonKönnen Bootstrap und Vue zusammen verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!