Vue peut-elle utiliser bootstrap ?

Si vous souhaitez en savoir plus sur le bootstrap, vous pouvez cliquer sur : Tutoriel bootstrap

1. Introduction de jquery

Étapes :

1. 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 l'index du fichier d'entrée. js Content

import $ from 'jquery' ;

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. Introduction de Bootstrap

1. Installer 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';

pertinent 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. Exécutez et vérifiez l'effet. Le bouton est devenu 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!