So führen Sie Bootstrap in Vue ein

Wenn Sie mehr über Bootstrap erfahren möchten, klicken Sie auf: Bootstrap-Tutorial

1. Einführung von jquery

Schritte:

1. Installieren Sie jquery

2 .config.js Inhalt hinzufügen

$ npm install jquery --save-dev

3. Inhalt in der Eintragsdatei index.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'
        })
    ]
}

4. Testen Sie, ob die Installation erfolgreich ist und sehen Sie, ob „123“ angezeigt wird

import $ from 'jquery' ;

2. Bootstrap einführen
1. Bootstrap installieren

<template>
  <div>
   Hello world！
  </div>
</template>
<script>
$(function () {  
    alert(123);  
 }); 
export default {
};
</script>
<style>
</style>

2. js Verwandte

$ npm install --save-dev bootstrap

3. Fügen Sie einen Teil des Bootstrap-Codes hinzu

import './node_modules/bootstrap/dist/css/bootstrap.min.css';
import './node_modules/bootstrap/dist/js/bootstrap.min.js';

Sehen Sie sich den Effekt an

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