Heim > Web-Frontend > Bootstrap-Tutorial > So führen Sie Bootstrap in ein Vue-Projekt ein

So führen Sie Bootstrap in ein Vue-Projekt ein

青灯夜游
Freigeben: 2020-12-10 17:58:43
nach vorne
6084 Leute haben es durchsucht

vueBootstrap in das Projekt eingeführt? Der folgende Artikel stellt es Ihnen vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

So führen Sie Bootstrap in ein Vue-Projekt ein

Empfohlene verwandte Tutorials: „Bootstrap-Tutorial

Bei der Einführung von Bootstrap in das Vue-Projekt müssen Sie zunächst zwei Abhängigkeiten einführen: jQuery und Popper

Schritt eins, Installation

1, NPM-Installation

Installation Die Der Befehl lautet wie folgt:

cnpm install bootstrap --save-dev
cnpm install jquery --save-dev
cnpm install popper.js --save-dev
Nach dem Login kopieren

Die neueste Version ist standardmäßig installiert. Wenn Sie die V3-Version von Bootstrap installieren möchten (weniger Abhängigkeiten), können Sie:

cnpm install bootstrap@3 --save-dev
Nach dem Login kopieren

Oder verwenden Sie die Visual Window-Installation

2 Installation

1. Suchen Sie nach „Projekt“ und „Abhängigkeiten installieren“. Bootstrap installieren

Schritt 2. Einführung


Schreiben Sie auf der Seite main.js den folgenden Code

// 引入jQuery、bootstrap
import $ from 'jquery'
import 'bootstrap'

// 引入bootstrap样式
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

// 全局注册 $
Vue.prototype.$ = $
Nach dem Login kopieren

Der dritte Schritt besteht darin, jQuery zu konfigurieren

Schreiben Sie in vue.config.js den folgenden Code (falls kein vue vorhanden ist). .config.js, dann im Geschwisterpaket package.json. Erstellen Sie manuell ein neues Verzeichnis im Verzeichnis

! !

Das obige ist der detaillierte Inhalt vonSo führen Sie Bootstrap in ein Vue-Projekt ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage