Bootstrap in Vue.js mit dem Bootstrap-Vue integrieren

In diesem Artikel wird die Integration von Bootstrap mit Vue.js mit dem Bootstrap-Vue untersucht, wodurch die Notwendigkeit von JQuery beseitigt wird. React und Vue.js sind beliebte JavaScript -Frameworks, aber Vue.js verfügt über eine einfachere Lernkurve und ein einfacheres Setup. Bootstrap, ein weit verbreiteter HTML/CSS-Framework, beruht traditionell auf JQuery. Bootstrap-vue verbreitet diese Lücke.

wichtige Vorteile von Bootstrap-View:

• kombiniert Bootstrap und Vue.js unter Verwendung von Bootstrap -Komponenten als VUE -Komponenten.
• installierbar über NPM, das Vue-Cli-Vorlagen für das Projektgerüst bietet.
• kann über Skript -Tags aufgenommen werden, um das Setup zu vereinfachen.
• unterstützt Vue.js -Anweisungen für dynamische Komponenten und Ereignisbehandlungen.

Bootstraps Hintergrund:

Erstellt von Mark Otto und Jacob Thornton bei Twitter erhielt Bootstrap aufgrund seines mobilen reagierenden Designs, der gemeinsamen UI-Komponenten und seines breiten Browser-Supports schnell Beliebtheit. Es ist zu einem Standard für neue Webprojekte geworden.

Startstrap und vue.js:

verbinden

Bootstraps Vertrauen in JQuery kompliziert die direkte Integration in Vue.js. Bootstrap-Vue und Vuestrap sind Lösungen, wobei Bootstrap-Vue die aktuellere und beliebtere Wahl ist.

stootstrap-vue im Detail:

Bootstrap-Vue unterstützt Bootstrap-Komponenten, das Gittersystem und die Vue.js-Direktiven. Der Online-Spielplatz bietet eine heiße Umgebung und JSFiddle-Exportfunktionen. Umfassende Dokumentation verbessert die Benutzerfreundlichkeit weiter.

Befehlszeileninstallation (NPM):

<code class="language-bash">npm i bootstrap-vue
npm i -g vue-cli
vue init bootstrap-vue/webpack-simple getting-started
cd getting-started
npm install
npm run dev</code>

Dies schafft ein neues Projekt mit der webpack-simple -Schange. main.js importiert Bootstrap- und Bootstrap-Vue-Styles und -komponenten. App.vue enthält den Front-End-Code.

Skript -Tag -Installation:

Alternativ Alternativ stootstrap-view über Skript-Tags in Ihr HTML:

<code class="language-html"><link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css">

</code>

Betrachten Sie @babel/polyfill für den Legacy Browser -Unterstützung.

Arbeiten mit Bootstrap-Vue-Komponenten:

Beispiele mit CodePen zeigen Erstellen von Warnungen und Listenansichten.

Warnkomponente:

<code class="language-html"><b-alert show dismissible>Hello {{ name }}!</b-alert></code>

Dies schafft eine abweisbare Warnung. Weitere Anpassungsoptionen finden Sie in der Bootstrap-VUE-Dokumentation.

Dynamische ListView -Komponente:

mit <b-list-group></b-list-group> und <b-list-group-item></b-list-group-item> mit der v-for -Richtlinie erstellt eine dynamische Liste:

<code class="language-bash">npm i bootstrap-vue
npm i -g vue-cli
vue init bootstrap-vue/webpack-simple getting-started
cd getting-started
npm install
npm run dev</code>

Ereignisbehandlung in Abzeichen:

<b-badge></b-badge> Komponenten können mit Ereignishörern verwendet werden:

<code class="language-html"><link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css">

</code>

Dies erhöht einen Freigabezähler auf der Schaltfläche Klicken Sie auf.

Schlussfolgerung:

bootstrap-vue vereinfacht die Integration von Bootstrap in VUE.JS-Projekte und bietet eine leistungsstarke Kombination zum Aufbau reaktionsschneller und dynamischer Webanwendungen. Mit den bereitgestellten Beispielen und Links zu weiteren Ressourcen können Entwickler schnell loslegen.

häufig gestellte Fragen (FAQs):

Der FAQS-Abschnitt ist im Originaltext bereits gut geschrieben und umfassend. Es sind keine Änderungen erforderlich.

Das obige ist der detaillierte Inhalt vonBootstrap in Vue.js mit dem Bootstrap-Vue integrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!