Heim > Artikel > Web-Frontend > So erstellen Sie ein Vue2.0+Boostrap-Projekt
Dieses Mal zeige ich Ihnen, wie Sie ein Vue2.0+Boostrap-Projekt erstellen und welche Vorsichtsmaßnahmen für den Aufbau eines Vue2.0+Boostrap-Projekts gelten. Schauen wir uns das hier an .
1. Vue CLI-Initialisierung Vue-Projekt
GlobalInstallationvue cli
npm install - -global vue-cli Erstellen Sie ein neues Projekt basierend auf der Webpack-Vorlage
vue init webpack my-project Geben Sie das Projektverzeichnis ein und probieren Sie es aus
npm run dev
2. Will BootStrap Treten Sie dem Vue-Projekt bei
Installieren Sie JQuery (da Boostrap von JQuery abhängt)
npm install jquery --save-dev
Installieren Sie Boostrap
npm install bootstrap --save-dev
Fügen Sie jquery, bootstrap.css bzw. bootstrap.js in main.js hinzu
import 'jquery/dist/jquery.min' import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min'
Überprüfen Sie
Fügen Sie den folgenden Code in eine beliebige Vorlage ein:
<p> <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">点击我</button> <p class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <p class="modal-dialog"> <p class="modal-content"> <p class="modal-header"> <h4 class="modal-title">模态弹出窗标题</h4> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> </p> <p class="modal-body"> <p>模态弹出窗主体内容</p> </p> <p class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </p> </p> </p> </p> </p>
Run npm run dev, die Seite erscheint:
Button präsentiert den Bootstrap-Button-Stil und beweist, dass die Bootstrap-Stilbibliothek erfolgreich hinzugefügt wurde
Klicken Sie auf die Schaltfläche und Folgendes wird angezeigt: Die Schaltfläche
kann korrekt auf das modale Popup-Dialogfeld reagieren und beweisen, dass die JQuery-Bibliothek und die Bootstrap-JS-Bibliothek erfolgreich hinzugefügt wurden.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Elegante Verwendung von CSS-Modulen in Vue
So schreiben Sie eine benutzerdefinierte Komponente mit Vue
Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Vue2.0+Boostrap-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!