如何在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 页面引入

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

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

const webpack = require("webpack")<br>module.exports = {<br>

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

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