在VueCli3项目中使用Bootsrap

在VueCli3项目中使用Bootsrap

在Vue开发中，为了实现响应式效果加入了Bootstrap框架

安装

npm i bootstrap jquery popper.js --save

配置

在项目根目录下新建或修改vue.config.js

const webpack = require("webpack");
module.exports={
     
    configureWebpack:{
     
        plugins: [
            new webpack.ProvidePlugin({
     
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
              })
        ]
    }
}

引入

在main.js中引入

import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
import 'jquery'

使用

在组件模板中，可以像常规开发那样使用bootstrap

<template>
    <div class="container">
        <div class="row mt-0 mt-md-2">
            <div class="col-12 col-lg-9 px-0">
            </div>
            <div class="Right d-none d-lg-block col-lg-3  pl-2 p-0">
            </div>
        </div>
    </div>
</template>

<script>

    export default {
     
      
    }
</script>

<style lang="scss" scoped>

</style>