So verwenden Sie Bootstrap mit Vue.JS

Bootstrap ist eines der weltweit beliebtesten Front-End-CSS-Frameworks, das viele Komponenten oder Designvorlagen bietet, um schnelle und schnell reaktionsschnelle Webanwendungen zu erstellen. Es handelt sich um ein Open-Source- und kostenlos zu bedienender Framework zum Erstellen moderner Websites, die mit HTML- und CSS-Vorlagen oder Benutzeroberflächenelementen wie Schaltflächen, Symbolen und Formularen angereichert sind. In diesem Beitrag lernen wir zuerst die Installation und verwenden Sie dann Bootstrap mit Vue.JS Framework.

Installation von Bootstrap

Es gibt eine „Bootstrap-Vue“ -Bibliothek, die speziell für Vue erstellt wurde.JS und kann als VUE -Komponenten mit den gleichen Funktionen wie Bootstrap verwendet werden. Bevor Sie mit der Installation „Bootstrap“ oder „Bootstrap-vue“ beginnen, wird angenommen, dass Sie mit HTML, CSS und JavaScript vertraut sind, haben Sie das Vue-Projekt eingerichtet und haben einen guten Editor auf Ihrem System installiert wie vs Code. Wenn Sie das VUE -Projekt noch nicht eingerichtet haben, können Sie die unten angegebene Prozedur befolgen, um ein Vue -Projekt schnell einzurichten.

Setup Vue -Projekt

Um das Vue -Projekt einzurichten, überprüfen Sie zunächst, ob VUE.JS ist in Ihrem System installiert oder nicht durch Eingeben des unten angegebenen Befehls:

$ vue -Verssion

Wenn Sie es noch nicht installiert haben, geben Sie den unten angegebenen Befehl ein, um VUE zu installieren.JS weltweit auf Ihrem Betriebssystem:

$ npm install -g @vue/cli

Nach erfolgreicher Installation von Vue.JS Global in Ihrem Betriebssystem erstellen Sie das VUE -Projekt, indem Sie den unten angegebenen Befehl „Vue create“ eingeben, gefolgt vom Projektnamen:

$ vue erstellen Vue-Project-Name

Sie werden aufgefordert, entweder die Voreinstellung auszuwählen oder Ihr eigenes benutzerdefiniertes Voreinstellung für das VUE -Projekt auszuwählen.

Nach der Konfiguration oder Auswahl der Standardvoreinstellung wird das VUE -Projekt in einer Weile erstellt.

Navigieren Sie nach dem Erstellen des VUE -Projekts mit dem Befehl „CD“ zum neu erstellten Projektverzeichnis.

$ cd vueProjectName

Zu diesem Zeitpunkt haben Sie das Vue -Projekt erfolgreich eingerichtet.

Startstrap installieren

Sobald Ihr System fertig ist und das Vue -Projekt eingerichtet ist! Sie können den „Bootstrap-Vue“ mit dem Garn oder NPM installieren. Wenn Sie die einfache „Bootstrap“ zu Stylingzwecken installieren möchten, können Sie den unten angegebenen Befehl eingeben, um sie zu installieren.

Geben Sie mit dem Garnpaket-Manager den unten angegebenen Befehl ein:

US

ODER

Geben Sie mit dem NPM-Paket-Manager den unten angegebenen Befehl ein:

$ npm install bootstrap bootstrap-vue-Save

In Ordnung! Sobald die 'Bootstrap' und 'Bootstrap-Vue' installiert sind, müssen Sie sie im Haupt aktivieren.JS -Datei.

Bootstrapvue aus 'Bootstrap-vue/dist/bootstrap-vue importieren.Esm ';
importieren.CSS ';
Importieren Sie 'Bootstrap/Dist/CSS/Bootstrap.CSS ';
Vue.Verwendung (Bootstrapvue);

Nachdem Sie die „Bootstrap“ und „Bootstrap-vue“ aktiviert haben, können Sie sie jetzt in Ihrem Vue-Projekt verwenden.

So verwenden Sie Bootstrap in Vue

Um Bootstrap mit VUE zu verwenden, bietet 'Bootstrap-Vue' verschiedene Komponenten als VUE-Komponente. Zum Beispiel kann eine Schaltfläche mit dem 'Bootstrap-Vue' wie diesem erstellt werden.

Taste

Besuchen Sie die offizielle Dokumentationsseite von Bootstrapvue, um sich über weitere Komponenten kennenzulernen.

So einfach ist es, Bootstrap in einem Vue -Projekt zu installieren und zu verwenden.

Abschluss

Bootstrap ist eine weit verbreitete CSS-Front-End-Bibliothek, die zum Erstellen von mobilen und reaktionsschnellen Web-Apps verwendet wird. Mit Hilfe von Bootstrapvue können wir solche Webanwendungen mit Vue erstellen. In diesem Beitrag gehen wir durch die Installation von Bootstrapvue in einem VUE durch.JS -Projekt und sehen Sie auch, wie Sie es aktivieren und verwenden können. Mit der Kombination solcher zwei robusten Bibliotheken können wir den Entwicklungsprozess beschleunigen und unsere Webanwendung bis zu den höchsten Grenzen verschönern.