vue2项目中使用 bootstrap
1.安装相关依赖
这里我使用的是bootstrap 3
,默认安装最新版
#使用cnpm或者yarn也行
npm i bootstrap@3 -S
npm i jquery -S
npm i popper.js -S
2.注册
在main.js
中注册,复制下面这段代码即可
// 引入jQuery、bootstrap
import $ from 'jquery'
import 'bootstrap'
// 引入bootstrap样式
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
// 全局注册 $
Vue.prototype.$ = $
3.配置vue.config.js
如果没有vue.config.js
这个文件,请在项目根目录
下手动创建。
const webpack = require("webpack");
module.exports = {
// 配置插件参数
configureWebpack: {
plugins: [
// 配置 jQuery 插件的参数
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Popper: ["popper.js", "default"],
}),
],
},
};
4.使用
我在App.vue
中演示一下
<template>
<div id="app">
<div class="container">
<button type="button" class="btn btn-primary">测试按钮</button>
</div>
</div>
</template>
好了,这就搞定了,接下来就是根据需求使用了。