Heim >Web-Frontend >js-Tutorial >So verwenden Sie Bootstrap im Vue-Cli-Projekt
Dieses Mal zeige ich Ihnen, wie Sie Bootstrap im Vue-Cli-Projekt verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Bootstrap im Vue-Cli-Projekt? Werfen wir einen Blick darauf.
Es ist sehr praktisch, Bootstrap zu einer HTML-Seite hinzuzufügen. Sie müssen nur die CSS- und JS-Dateien über die Link- und Skript-Tags übergeben.
Wie fügt man es also einem mit vue-vli generierten Frontend-Projekt hinzu? Da das Framework anders ist, ist es etwas gewöhnungsbedürftig.
npm install jquery --save npm install bootstrap --save npm install popper.js --save
konfigurieren Sie webpack.base.conf.js
//在顶部添加 const webpack = require('webpack')
//在module.exports = {}末尾添加下面代码 module.exports = { ... plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ] }
Fügen Sie
import $ from 'jquery' import 'bootstrap'
hinzu, um jquery in main zu testen. js
//在vue文件中添加测试代码 <script> $(function () { alert('234') }) export default { name: 'App' } </script>
Bootstrap testen
<template> <p class="container"> <p class="row"> <p class="col-md-6"> <button class="btn btn-primary">测试按钮</button> </p> </p> </p> </template>
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:
So verwenden Sie vue.js und element-ui, um eine Menübaumstruktur zu implementieren
Anleitung Verwenden Sie den Modifikator vue Inner .sync
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Bootstrap im Vue-Cli-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!