vue cli3 引入Bootstrap-vue

1、npm install vue bootstrap-vue bootstrap  下載

2、npm install jquery -S

3、在vue.config加入   

 const webpack = require("webpack");

      module.exports={

      configureWebpack: {

      plugins: [

          new webpack.ProvidePlugin({

              $: "jquery",

              jQuery: "jquery",

              "window.jQuery": "jquery",

              Popper: ["popper.js", "default"]

          })

      ]

  }

 }

    4、在main.js 引入

          

import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

  5、測試

       

<div>
  <b-card
    title="Card Title"
    img-src="https://picsum.photos/600/300/?image=25"
    img-alt="Image"
    img-top
    tag="article"
    style="max-width: 20rem;"
    class="mb-2"
  >
    <b-card-text>
      Some quick example text to build on the card title and make up the bulk of the card's content.
    </b-card-text>

    <b-button href="#" variant="primary">Go somewhere</b-button>
  </b-card>
</div>