vue中使用bootstrapvue

参考网站：

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，添加代码

Primary

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'

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

 成功