在vue-cli脚手架项目中使用bootstrap框架

一、在vue-cli脚手架项目中使用bootstrap3框架的步骤

1、先在项目中安装bootstrap和jquery

npm i jquery bootstrap@3 -S

2、在main.js中引入bootstrap

import 'bootstrap/dist/js/bootstrap.js'
import 'bootstrap/dist/css/bootstrap.css'

3、在项目的根目录新建一个配置文件vue.config.js,输入以下代码

const webpack = require("webpack")
module.exports = {
	// 配置插件参数
	configureWebpack: {
		plugins: [
			// 配置 jQuery 插件的参数
			new webpack.ProvidePlugin({
				// 引入jquery
				$: 'jquery',
				jQuery: 'jquery',
				'window.jQuery': 'jquery'
			})
		]
	}
}

二、在vue-cli脚手架项目中使用bootstrap4框架的步骤

1、在main.js中引入bootstrap

npm i jquery bootstrap@4.6 popper.js -S

2、在main.js中引入bootstrap

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'       

3、在项目的根目录新建一个配置文件vue.config.js,输入以下代码

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