vue中使用bootstrap4踩坑之旅

bootstrapvue官网
bootstrap4中文官网

以下文章记录本人的踩坑过程&＃xff0c;最后已亲测有效&＃xff0c;但不保证是最简便的方法&＃xff0c;最好的建议是去bootstrapvue官网看文档直接尝试。

一、引入jquery

1.安装jQuery

npm install jquery --save


或

yarn add jquery --save


2.在webpack.base.config.js 添加内容

&＃43;&＃43;&＃43; const webpack &＃61; require("webpack");module.exports &＃61; {context: path.resolve(__dirname, &＃39;../&＃39;),entry: {app: &＃39;./src/main.js&＃39;},output: {path: config.build.assetsRoot,filename: &＃39;[name].js&＃39;,publicPath: process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;production&＃39;? config.build.assetsPublicPath: config.dev.assetsPublicPath},&＃43;&＃43;&＃43; plugins: [&＃43;&＃43;&＃43; new webpack.ProvidePlugin({&＃43;&＃43;&＃43; jQuery: &＃39;jquery&＃39;,&＃43;&＃43;&＃43; $: &＃39;jquery&＃39;&＃43;&＃43;&＃43; })&＃43;&＃43;&＃43; ],resolve: {extensions: [&＃39;.js&＃39;, &＃39;.vue&＃39;, &＃39;.json&＃39;],alias: {&＃39;vue$&＃39;: &＃39;vue/dist/vue.esm.js&＃39;,&＃39;&＃64;&＃39;: resolve(&＃39;src&＃39;),}},.........//把有加号的代码放到webpack.base.config.js中配置jq


3.在入口文件main.js 里面添加内容

import $ from &＃39;jquery&＃39; ;


4.测试一下是否安装成功&＃xff0c;看看能否弹出’123’

二、引入Bootstrap

npm install bootstrap --save


或

yarn add bootstarp --save


然后在main.js引用bootstrap

import &＃39;bootstrap/dist/css/bootstrap.css&＃39;


这时候想要看自己电脑安装成功没有就去package.json
安装成功后是这样的&＃xff1a;


注意&＃xff1a;这里的路径要注意&＃xff0c;根据实际情况&＃xff1b;还有一点&＃xff0c;我自己亲测vue中这里不需要引入bootstrap.js&＃xff0c;继续看下面

这时候在你的App.vue template标签内粘贴一段简单的bootstrap的代码看能不能运行出来效果&＃xff0c;运行后命令行是这样的

注意&＃xff1a;如果报错关于popper.js的错 如&＃xff1a;bootstrap dropdown require popper.js的话就去安装 npm install popper.js --save 或 yarn add popper.js --save ,因为现在bootstrap是需要依赖popper才能使用的

没有任何错误之后呢&＃xff0c;这时候自己在浏览器输入你平时的那个localhost地址回车&＃xff0c;不出意料的话页面可能没显示出bootstrap效果&＃xff0c;去BootstrapVue官网文档&＃xff08;链接在文章头&＃xff09;查看后才发现&＃xff0c;坑啊&＃xff01;

这里重要几步&＃xff1a;

npm install vue bootstrap-vue bootstrap


或

yarn add vue bootstrap-vue bootstrap


这时候package.json页面里是有变化的&＃xff1a;

在main.js入口点注册BootstrapVue插件

import BootstrapVue from &＃39;bootstrap-vue&＃39;Vue.use(BootstrapVue)


并导入Bootstrap和BootstrapVue css文件&＃xff1a;&＃xff08;由于我们已经在上面导入bootstrap&＃xff09;

所以这里只需要

import &＃39;bootstrap-vue/dist/bootstrap-vue.css&＃39;


做到这里可以再次运行vue项目尝试&＃xff0c;看看页面出现自己要的bootstrap的组件了吗 &＃xff1a;&＃xff09;