So führen Sie Bootstrap in Vue ein

爱喝马黛茶的安东尼
Freigeben: 2019-07-13 11:25:17
Original
4640 Leute haben es durchsucht

So führen Sie Bootstrap in Vue ein

1. Einführung von jquery

Schritte:

1. Installieren Sie jquery

$ npm install jquery --save-dev
Nach dem Login kopieren

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'
        })
    ]
}
Nach dem Login kopieren

3. Fügen Sie Inhalte in der Eintragsdatei index.js hinzu

import $ from 'jquery' ;
Nach dem Login kopieren

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>
Nach dem Login kopieren

2. Führen Sie Bootstrap ein

1 . Installieren Sie Bootstrap

$ npm install --save-dev bootstrap
Nach dem Login kopieren

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;;
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!