使用bootstrap需要在项目中先安装jQuery
安装jQuery:
1.npm install jquery --save-dev
安装参数 --save 与 --save-dev 区别在于--save-dev安装于开发环境中
2.在webpack.base.conf.js(如果是是开发[dev]环境则在webpack.dev.conf.js;两个文件都在bulid目录下;)中添加如下内容:
var webpack = require('webpack')
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery" })
],
3. 在main.js中引入jQuery:
import 'jquery'
4.测试一下jQuery是否安装成功:
<script>
$(function () {
alert("hello")
})
</script>
如下安装成功:
安装bootstrap:
1. npm install bootstrap --save-dev
2.npm install --save axios popper.js
3.main.js引入:
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
4.测试是否成功:
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
5.效果出现即成功: