Comment introduire le bootstrap dans vue

1. Introduction de jquery

Étapes :

1. Installer jquery

$ npm install jquery --save-dev

2. Ajouter du contenu dans webpack.config.js

+ 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. Ajouter du contenu dans le fichier d'entrée index.js

import $ from 'jquery' ;

Recommandations associées : "Tutoriel de démarrage de Bootstrap 》

4. Testez si l'installation a réussi et voyez si '123' apparaît

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

2. Présentez Bootstrap

1. . Installez Bootstrap

$ npm install --save-dev bootstrap

2. Introduisez le

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

approprié dans le fichier d'entrée index.js 3. Ajoutez un morceau de code Bootstrap

  <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. effet. Ces boutons sont devenus un groupe de boutons Bootstrap.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!