Heim > Web-Frontend > Bootstrap-Tutorial > Kann Vue Bootstrap verwenden?

Kann Vue Bootstrap verwenden?

angryTom
Freigeben: 2019-07-29 09:36:32
Original
6455 Leute haben es durchsucht

Kann Vue Bootstrap verwenden?

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

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

3. js-Inhalt

import $ from 'jquery' ;
Nach dem Login kopieren

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

2. Einführung von Bootstrap

1. Installiere Bootstrap

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

2. Fügen Sie das relevante

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. Führen Sie die Schaltfläche aus und überprüfen Sie sie. Sie wurde zu einer Bootstrap-Schaltflächengruppe

Kann Vue Bootstrap verwenden?

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!

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