Wenn Sie mehr über Bootstrap erfahren möchten, klicken Sie auf: Bootstrap-Tutorial
1. Einführung von jquery
Schritte:
1 jquery
$ npm install jquery --save-dev
2. Inhalte in webpack.config.js hinzufügen
+ const webpack = require("webpack"); module.exports = { entry: './index.js', output: { path: path.join(__dirname, './dist'), publicPath: '/dist/', filename: 'index.js' }, + plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery' }) ] }
3. js-Inhalt
import $ from 'jquery' ;
4. Testen Sie, ob die Installation erfolgreich ist und prüfen Sie, ob „123“ angezeigt wird
<template> <div> Hello world! </div> </template> <script> $(function () { alert(123); }); export default { }; </script> <style> </style>
2. Einführung von Bootstrap
1. Installiere Bootstrap
$ npm install --save-dev bootstrap
2. Fügen Sie das relevante
import './node_modules/bootstrap/dist/css/bootstrap.min.css'; import './node_modules/bootstrap/dist/js/bootstrap.min.js';
in die Eintragsdatei index.js ein. 3. Fügen Sie einen Teil des Bootstrap-Codes hinzu
<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>
4. Führen Sie die Schaltfläche aus und überprüfen Sie sie. Sie wurde zu einer Bootstrap-Schaltflächengruppe
Das obige ist der detaillierte Inhalt vonKann Vue Bootstrap verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!