webpack + bootstrap的用法
1、安装jQuery和bootstrap
npm install jquery --save-dev
npm install bootstrap --save-dev
2、bootstrap依赖jquery,故需要配置webpack.base.conf.js
在webpack.base.conf.js中头部添加:
var webpack = require('webpack')
在entry后面添加:
plugins: [
new webpack.ProvidePlugin({
'$' : 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery'
})
]
补充: ProvidePlugin的机制是:当webpack加载到某个js模块里,出现了未定义且名称符合(字符串完全匹配)配置中key的变量时,会自动require配置中value所指定的js模块。另外,使用ProvidePlugin还有个好处,就是自己写的代码里,不用require jQuery!
3、在main.js中引入:
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
4、在App.vue中使用:
<template>
<div id="app">
<button type="button" class="btn btn-success btn-sm">按钮</button>
</div>
</template>
5、运行
在npm run dev 时可能还需要安装popper.js,( npm install --save popper.js) 说是bootstrap.min.js 的依赖,安装后再npm run dev就可以了。