vue3全局导入bootstrap5

最新推荐文章于 2025-04-23 22:33:09 发布

賏铘

最新推荐文章于 2025-04-23 22:33:09 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/qq_66061193/article/details/130060573

版权

文章介绍了如何在Vue项目中安装Bootstrap和jQuery，并在main.js中引入它们。然后在vue.config.js中配置webpack的ProvidePlugin，以便全局使用$和jQuery。同时，也引入了Popper.js以支持Bootstrap的弹出功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：安装

npm install bootstrap --save-dev
npm install jquery --save-dev

二、在main.js中引入

// 引入jQuery、bootstrap
import 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

第三步、配置 jQuery

vue.config.js 中，写如下代码

const webpack = require("webpack")

module.exports = defineConfig({
  	// 配置插件参数
	configureWebpack: {
		plugins: [
			// 配置 jQuery 插件的参数
			new webpack.ProvidePlugin({
				$: 'jquery',
				jQuery: 'jquery',
				'window.jQuery': 'jquery',
				Popper: ['popper.js', 'default']
			})
		]
	}
})

这样就可以使用啦