vue2以及新web框架如何import bootstrap4及报错处理

想必大家对新web框架都有所了解也遇到过一些坑，接下来我来分享一下我遇到的坑；

今天这个坑大部分来自于对webpack配置不够了解

当你配置新web项目的时候 你想用其他框架的时候 怎么办 试着摸索模仿写法

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import qs from 'qs'

当你这么引入一个bootstrap的时候，浏览器会报一个错误

jquery is not defind
Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s JavaScript.

这么一个错误 一个低级错误
因为bootstrap.js是依赖JQuery的，所以要在webpack.base.conf.js中加载juery插件，

npm install --save jquery

不要试图import jquery
因为import是异步加载模块 所以你得到结果还是报错，我们必须在webpack配置上下手

在webpack.base.conf.js中添加一下代码

plugins: [
   new webpack.optimize.CommonsChunkPlugin('common'),
   new webpack.ProvidePlugin({
     jQuery: 'jquery',
     $: 'jquery',
   })

添加jq 则会与webpack作为基础插件（依赖）一同加载；
* 以上可以解决bootstarp3以下版本问题 因为4版本 还引入popper *

我们 npm install bootstrap@4.0.0-beta.2 的时候 他并没有下载popper 这个人感觉 也是很坑

Error Bootstrap dropdown require Popper.js (https://popper.js.org)

Bootstrap4 的dropdown插件是依赖popper.js 我们需要自己下载popper
npm install –save popper.js

plugins: [
   new webpack.optimize.CommonsChunkPlugin('common'),
   new webpack.ProvidePlugin({
     jQuery: 'jquery',
     $: 'jquery',
    Popper: 'popper.js'
   })

* 这样就解决了 bootstrap4 加载报错问题！ *