Comment introduire le bootstrap dans vue-Tutoriel d'amorçage-php.cn

Comment introduire le bootstrap dans vue

爱喝马黛茶的安东尼

Libérer： 2019-07-13 11:25:17

original

4639 Les gens l'ont consulté

1. Introduction de jquery

Étapes :

1. Installer jquery

$ npm install jquery --save-dev

Copier après la connexion

2. Ajouter du contenu dans webpack.config.js

+ const webpack = require("webpack");
module.exports = {
    entry: &#39;./index.js&#39;,
    output: {
        path: path.join(__dirname, &#39;./dist&#39;),
        publicPath: &#39;/dist/&#39;,
        filename: &#39;index.js&#39;
    },
  + plugins: [
        new webpack.ProvidePlugin({
            jQuery: &#39;jquery&#39;,
            $: &#39;jquery&#39;
        })
    ]
}

Copier après la connexion

3. Ajouter du contenu dans le fichier d'entrée index.js

import $ from &#39;jquery&#39; ;

Copier après la connexion

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>

Copier après la connexion

2. Présentez Bootstrap

1. . Installez Bootstrap

$ npm install --save-dev bootstrap

Copier après la connexion

2. Introduisez le

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

Copier après la connexion

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>

Copier après la connexion

4. effet. Ces boutons sont devenus un groupe de boutons Bootstrap.

Comment introduire le bootstrap dans vue