Wie vue-cli Bootstrap-Tools einführt

In diesem Artikel wird hauptsächlich vorgestellt, wie vue-cli das Bootstrap-Tool vorstellt. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Die folgenden Vorgänge basieren auf der normalen Installation der Knotenumgebung.

1. Stellen Sie jq vor:

Geben Sie in der npm-Konsole das Projektverzeichnis ein und geben Sie dann den Befehl npm install jquery --save-dev ein (besser um npm durch cnpm zu ersetzen und cnpm zu verwenden, um in häuslichen Umgebungen schneller herunterzuladen).

2. Ändern Sie die Konfigurationsdatei webpack.base.conf.js im Build-Verzeichnis:

1) Fügen Sie das Webpack-Objekt hinzu: var webpack=require('webpack ') ;

2) Fügen Sie die folgende Konfiguration zu module.exports hinzu:

plugins: [ 

 　　　　new webpack.ProvidePlugin({ 

 　　　　　　$:"jquery", 

　　　　　　 jQuery:"jquery", 

　　　　　　 "windows.jQuery":"jquery" 

　　　　 }) 

　　]

3) Fügen Sie der Eintragsdatei main.js: import hinzu jquery von 'jquery'

3. Bootstrap einführen:

1) Ändern Sie die Datei webpack.base.conf.js:

alias: { 

　　　　 'vue$': 'vue/dist/vue.esm.js', 

　　　　 '@': resolve('src'), 

　　　　 'assets': path.resolve(__dirname, '../src/assets'), 

　　　　 'jquery': "jquery/src/jquery" 

　　 }

2) Zur Eintragsdatei main.js hinzufügen:

　　import './assets/css/bootstrap.min.css' 
　　import './assets/js/bootstrap.min'

3) Verschiedene Bootstrap-Dateien in das Assets-Dateiverzeichnis kopieren:

 

Verwandte Empfehlungen:

Erstellen Sie eine benutzerdefinierte Auswahl basierend auf dem Button-Dropdown in Bootstrap

Teilen der Verwendung des Bootstrap-Responsive-Tools

Detaillierte Erläuterung des Suchfelds und der Abfragefunktion von Bootstrap Table

Das obige ist der detaillierte Inhalt vonWie vue-cli Bootstrap-Tools einführt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!