如何在vue导入bootstrap的组件

饿少 2021-03-26

源自：Vue实战开发慕旅游网的前端 4-1 VantUI初探

收起

1回答

好帮手慕燕燕 2021-03-27 11:42:00

同学，你好！可参考以下思路导入

1、vue项目中引入bootstrap，先引入两个依赖：jQuery 和 popper

cnpm install jquery -S

cnpm install popper.js -S

2、然后安装bootstrap，npm install bootstrap -S

3、在mian.js 页面引入

// 引入jQuery、bootstrap
import $ from 'jquery'
import 'bootstrap'
 
// 引入bootstrap样式
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
 
// 全局注册 $
Vue.prototype.$ = $

4、在vue.config.js中配置jQuery

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

5、之后就可以使用了，建议同学使用课程中所讲的VantUI组件。

祝：学习愉快！

收起回答

提问者饿少 #1

出了这种错误

2021-03-27 14:22:02
好帮手慕燕燕回复提问者饿少 #2

同学，你好！可尝试以下思路解决：
1、删除 node_modules，然后再重新安装
2、升级下node版本，删除 node_modules ，然后运行npm cache clean 或者npm cache clean --force
3、将项目的dist文件夹删除
4、将360或其他杀毒软件暂时关闭
vue.js是组件化开发模式，vantUI是vue组件库，是面向移动端的，更适用课程中的慕旅游网项目，推荐使用vantUI组件，与课程一致。
祝：学习愉快！

2021-03-27 16:39:58
提问者饿少回复好帮手慕燕燕 #3

为什么在vue项目中引入却是这种效果

2021-03-27 20:31:33