How to introduce bootstrap into vue-Bootstrap Tutorial-php.cn

How to introduce bootstrap into vue

爱喝马黛茶的安东尼

Release： 2019-07-13 11:25:17

Original

4678 people have browsed it

1. Introduction of jquery

Steps:

1. Install jquery

$ npm install jquery --save-dev

Copy after login

2. Add content to 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;
        })
    ]
}

Copy after login

3. Add content to the entry file index.js

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

Copy after login

Related recommendations: "bootstrap Getting Started Tutorial》

4. Test whether the installation is successful and see if '123' pops up

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

Copy after login

2. Introduce Bootstrap

1. Installation Bootstrap

$ npm install --save-dev bootstrap

Copy after login

2. Introduce the relevant

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

Copy after login

3. Add a piece of Bootstrap code

  <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>

Copy after login

4. Run and check the effect. These buttons have become Bootstrap button group.

How to introduce bootstrap into vue

The above is the detailed content of How to introduce bootstrap into vue. For more information, please follow other related articles on the PHP Chinese website!