Vue——引进bootstrap

1. 引进jQuery。

<1>安装指令：

 npm install jquery --save-dev

<2>在build目录下的webpack.base.conf.js中,在module.exports中找到resolve，在其alias项中添加：

 'jquery':'jquery',

<3>在module.exports中找到plugins，并添加以下代码

 // 增加一个plugins
plugins: [
   new webpack.optimize.CommonsChunkPlugin('common'),
   new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery",
    Popper: ['popper.js', 'default'],   //安装poper
   })],

<4>在main.js引入jquery

import $ from 'jquery' ;

<5>在引入之后，ESlint会对其中的“$"显示报错，在eclintrc.js中添加以下代码：

 env: {
    browser: true,
    jquery:true   //添加的
  },

备注：
在引入jQuery之后可通过以下代码尝试是否正确引入：

import $ from 'jquery'
$(function () {
alert('啦啦啦')
})

2. 安装poper.

<1>安装指令：

cnpm install --save popper.js

<2>在build目录下的webpack.base.conf.js中头部加入

const webpack = require("webpack");

<3>在webpack.base.conf.js中module.exports中的plugins添加上:

 Popper: ['popper.js', 'default'],

3. 引进bootstrap

<1>安装指令：

 cnpm install --save-dev bootstrap

<2>在main.js中添加：

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

如果报错可试一下：

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