vue中使用bootstrapvue

最新推荐文章于 2025-06-02 09:18:03 发布

原创最新推荐文章于 2025-06-02 09:18:03 发布 · 1w 阅读

40 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

web前端专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍如何将BootstrapVue集成到Vue项目中，包括安装步骤、组件使用及jQuery与Popper.js的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考网站：

Getting Started | BootstrapVue

Bootstrap4中文站 · 全球最流行的 HTML、CSS 和 JS 工具库。

1.vue2版本，根据文章创建vue项目，vue.js创建网站实例1_hifhf的专栏-CSDN博客_vue.js做一个网站

2.进入demo目录，在demo项目中，添加bootstrap-vue

npm install bootstrap-vue

3.如果是vue3，可以直接创建项目（我用的vue2.9.6，没有测试过）

npx @vue/cli create demo

4.在src/main.js中添加引用

import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

5.添加组件，打开src/components/HelloWord.vue，添加代码

<button type="button" class="btn btn-primary">Primary</button>

6.测试

npm run dev

出现蓝色按钮，表示应用bootstrap样式成功

7.jquery.js和popper.js的引用，进入demo目录

npm install jquery --save
npm install popper.js --save

修改build目录下的webpack.base.conf.js配置文件：

1）加入webpack对象：const webpack=require('webpack');

2）在module.exports里面加入以下配置：　

plugins: [
  new webpack.optimize.CommonsChunkPlugin('common'),
  new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
   Popper: ['popper.js', 'default']
  })
 ]

在main.js中把jQuery，bootstrap的js和css通过import引进来

import $ from 'jquery'
import 'bootstrap/dist/js/bootstrap.min'

测试插入一个下拉菜单，如图：

成功