【vue3项目中引入Bootstrap与jquery】

本文介绍: 需要引入 bootstrap+ jquery+ popper.js1、npm i bootstrap jquery popper.js —save2、在项目根目录下新建或修改 vue.config.js const webpack = require(“webpack“);module.exports={ configureWe b pack:{ plugins: [ new webpack.Pro v idePlugin({

需要 引入 bootstrap+ jquery+ popper.js

1、组合命令下载最新版

npm i bootstrap jquery popper.js --save

或者先

cnpm i bootstrap popper.js --save

cnpm i --save jquery@1.*

jquery@1.*是指定版本号，如果要下载最新的版本，直接

cnpm i --save jquery

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

/*const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})*/

const { defineConfig } = require('@vue/cli-service')
const webpack = require("webpack");

module.exports=defineConfig({
	transpileDependencies: true,
    configureWebpack:{
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default']
              })
        ]
    },
	configureWebpack: config =&gt; {
	    // 为生产环境修改配置...
	    if (process.env.NODE_ENV === 'production') {
	        config.mode = 'production';
	        // 打包文件大小配置
	        config.performance = {
	          maxEntrypointSize: 10000000,
	          maxAssetSize: 30000000
	        }
	    }
	}
})

3、在 main.js中引入

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

4、在vue 文件中使用

&lt;template&gt;
    <div class="container"&gt;
        <div class="row mt-0 mt-md-2"&gt;
            <div class="col-12 col-lg-9 px-0"&gt;
            </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>