vue 使用boostrap

首先使用npm下载jquery和boostrap依赖
npm install jquery bootstrap@3 popper.js --save
bootstrap@3 指的是安装 Bootstrap 第三版,不加则默认版本4

一. 文件配置

在package.json的同级目录添加vue.config.js文件,在文件中添加

const webpack = require('webpack')

module.exports = {
    chainWebpack: (config) => {
        config.plugin('provide').use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js','default']  //在jquery的配置下添加多这一行配置
        }]);
    },
    css: {
        sourceMap: true
    },
    devServer:{
        port:8080
    },
}

二. 全局引用

在main.js中添加

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
// eslint-disable-next-line no-unused-vars
Vue.config.productionTip = false
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import ElementUi from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUi)

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

三. 局部引用

在需要使用bootstrap的地方引入

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'