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 bootstrap@3.3.0 –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来构建你的项目了。