vue cli3 引入Bootstrap-vue

最新推荐文章于 2024-08-14 15:30:25 发布

一袭青衫少年郎

最新推荐文章于 2024-08-14 15:30:25 发布

阅读量2.5k

点赞数 2

分类专栏： vue 文章标签： vue bootstrap

本文链接：https://blog.csdn.net/kukeno1/article/details/107042938

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>