vue3全局导入bootstrap5方式

更新时间：2023年10月26日 09:42:51 作者：賏铘

这篇文章主要介绍了vue3全局导入bootstrap5方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3全局导入bootstrap5

安装

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']
			})
		]
	}
})

这样就可以使用啦

vue3全局导入bootstrap-icons问题

安装

npm i bootstrap-icons

在min.js中导入

import "bootstrap-icons/font/bootstrap-icons.css";

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

教你用vue实现一个有趣的围绕圆弧动画效果
最近做的两个项目都是关于vue的,做完整理一下,这篇文章主要给大家介绍了关于如何用vue实现一个有趣的围绕圆弧动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
Vue中全局限制输入特殊字符方式
这篇文章主要介绍了Vue中全局限制输入特殊字符方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue中的this.$router.push()路由传值方式
这篇文章主要介绍了vue中的this.$router.push()路由传值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue中监听input框获取焦点及失去焦点的问题
这篇文章主要介绍了vue中监听input框获取焦点，失去焦点的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
VueCli4项目配置反向代理proxy的方法步骤
这篇文章主要介绍了VueCli4项目配置反向代理proxy的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
Vue页面内公共的多类型附件图片上传区域并适用折叠面板(示例代码)
本文中实现的附件上传区域支持超多类型附件分类型上传，并且可根据特定条件具体展示某些类型的附件上传，本文给大家分享Vue页面内公共的多类型附件图片上传区域并适用折叠面板的示例代码，需要的朋友参考下吧
2021-12-12
Vue 短信验证码组件开发详解
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的库。这篇文章主要介绍了Vue 短信验证码组件开发详解,需要的朋友可以参考下
2017-02-02
老生常谈vue3组件通信方式
这篇文章主要介绍了vue3组件通信方式,面试题经常会问到vue3组件间的通信方式，今天就通过实例代码给大家详细介绍下，对vue3组件通信相关知识感兴趣的朋友一起看看吧
2022-08-08
vue 自定义组件的写法与用法详解
这篇文章主要介绍了vue 自定义组件的写法与用法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下
2020-03-03
vue.js实现请求数据的方法示例
这篇文章主要给大家介绍了vue.js实现请求数据的方法示例，文中分别介绍了vue1.0和vue2.0的示例方法，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-02-02