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

So führen Sie Bootstrap in Vue ein

爱喝马黛茶的安东尼
爱喝马黛茶的安东尼Original
2019-07-13 11:25:174703Durchsuche

So führen Sie Bootstrap in Vue ein

1. Einführung von jquery

Schritte:

1. Installieren Sie jquery

$ npm install jquery --save-dev

2. Fügen Sie Inhalte in webpack.config.js hinzu

+ 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. Fügen Sie Inhalte in der Eintragsdatei index.js hinzu

import $ from 'jquery' ;

Verwandte Empfehlungen: „Bootstrap Getting Started Tutorial

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

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

2. Führen Sie Bootstrap ein

1 . Installieren Sie Bootstrap

$ npm install --save-dev bootstrap

2. Fügen Sie das entsprechende

import &#39;./node_modules/bootstrap/dist/css/bootstrap.min.css&#39;;
import &#39;./node_modules/bootstrap/dist/js/bootstrap.min.js&#39;;

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 Diese Schaltflächen sind zur Bootstrap-Schaltflächengruppe geworden.

So führen Sie Bootstrap in Vue ein

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!

Stellungnahme:
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
Vorheriger Artikel:Wann erschien Bootstrap?Nächster Artikel:Wann erschien Bootstrap?