vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3全局导入bootstrap5

vue3全局导入bootstrap5方式

作者:賏铘

这篇文章主要介绍了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";

总结

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

您可能感兴趣的文章:
阅读全文