vue中使用bootstrap4踩坑之旅

bootstrapvue官网
bootstrap4中文官网

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

一、引入jquery

1.安装jQuery

npm install jquery --save

或

yarn add jquery --save

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

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

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

import $ from 'jquery' ;

4.测试一下是否安装成功，看看能否弹出’123’

<template><div>Hello world！</div></template><script>$(function () {  alert(123);  }); export default {};</script><style></style>

二、引入Bootstrap

npm install bootstrap --save

或

yarn add bootstarp --save

然后在main.js引用bootstrap

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

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

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

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

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

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

这里重要几步：

npm install vue bootstrap-vue bootstrap

或

yarn add vue bootstrap-vue bootstrap

这时候package.json页面里是有变化的：

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

import BootstrapVue from 'bootstrap-vue'Vue.use(BootstrapVue)

并导入Bootstrap和BootstrapVue css文件：（由于我们已经在上面导入bootstrap）

所以这里只需要

import 'bootstrap-vue/dist/bootstrap-vue.css'

做到这里可以再次运行vue项目尝试，看看页面出现自己要的bootstrap的组件了吗：）