安装
1
| npm i bootstrap jquery popper.js --save
|
配置
在项目根目录下新建或修改vue.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
| const webpack = require('webpack');
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
]
}
};
|
引入
在main.js中引入
1
2
3
| import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'jquery';
|
使用
在组件模板中，可以像常规开发那样使用 bootstrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <template>
<div class="container">
<div class="row mt-0 mt-md-2">
<div class="col-12 col-lg-9 px-0"></div>
<div class="Right d-none d-lg-block col-lg-3 pl-2 p-0"></div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped></style>
|