vue使用bootstrap

1、安装jquery

npm install jquery –save-dev

打开build文件夹下的webpack.base.conf.js
头部添加代码：

const webpack = require("webpack");

module.exports 中添加代码

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],

在入口文件main.js中加入代码：

import $ from 'jquery' ;

测试：

<script>
  $(function () {
    alert()
  })
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

2、安装bootstrap

npm install –save-dev bootstrap

在入口文件main.js中加入代码：

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../node_modules/bootstrap/dist/js/bootstrap.min'

这时可能会报错

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                 14:43:35

This dependency was not found:

* popper.js in ./node_modules/_bootstrap@4.1.3@bootstrap/dist/js/bootstrap.min.js

To install it, you can run: npm install --save popper.js

因为bootstrap.js不仅依赖jquery还有popper.js，所以安装popper.js

cnpm install –save popper.js

同时在webpack.base.conf.js加入》》》Popper: [‘popper.js’, ‘default’],

plugins: [
    new webpack.ProvidePlugin({
      $:"jquery",
      jQuery:"jquery",
      "windows.jQuery":"jquery",
      Popper: ['popper.js', 'default'],
    })
  ],

测试加入bootstrap代码

   <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>