在VueCli3项目中使用Bootstrap

发表于 | 分类于 | 评论数：
本文字数： 5.4k | 阅读时长 ≈ 5 分钟

在VueCli3项目中使用Bootsrap

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

安装

1
npm i bootstrap jquery popper.js --save

配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
const webpack = require("webpack");
module.exports={
    configureWebpack:{
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
              })
        ]
    }
}

引入

在main.js中引入

1
2
3
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
import 'jquery'

使用

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>
0%