vue 安装 bootstrap(vue安装JQuery)

vue项目中使用bootstrap的时候需要安装jquery，bootstrap，并配置，为什么要安装jquery呢，来看bootstrap官网的一段介绍

Bootstrap 中的许多组件需要依赖 JavaScript 才能运行。具体来说，他们依赖的是 jQuery、Popper.js 以及我们自己开发的 JavaScript 插件。

 也就是说bootstrap依赖jQuery和Popper.js，那么，让我们开始吧！

首先，必须的准备工作，安装nodejs，搭建vue-cli，创建vue项目，这里就不多说了，详情参见这里。

安装jQuery

npm install jquery --save-dev

需要做一下配置，在 build 文件夹下的 webpack.base.conf.js 文件中引入webpack模块：

const webpack = require('webpack')

然后在导出模块（module.exports）中添加如下代码，与导出模块中的所有对象平级即可，或者你也可以放在最后面：

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

在main.js中全局引入jQuery：

import $ from 'jquery'

至此，jQuery安装配置完毕，可以使用了。

安装bootstrap

npm安装：

npm install bootstrap –save-dev 

如果想要安装相应版本的也可以使用：

npm install [email protected] –save-dev 

安装完成之后需要在main.js中全局引入：

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

因为bootstrap依赖Popper.js，所以这个时候运行项目会报错：

这是因为缺少这个依赖，需要先安装：

npm install --save-dev popper.js

安装完毕，npm run dev 运行项目，至此你就可以用bootstrap来构建你的项目了。