在新版本vue cli中引入bootstrap

1.安装jQuery

bootstrap是基于jQuery的，因此我们要先安装一下jQuery包

cnpm install jquery -S

手动新建vue.config.js文件，注意要和package.json文件同级，在新建的vue.config.js文件中添加以下代码

/*
*Vue-CLI项目的核心配置文件
*/
const webpack = require("webpack");

module.exports = {
 configureWebpack: {
   plugins: [
     new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery",
       "window.jQuery": "jquery",
       Popper: ["popper.js", "default"]
     })
   ]
 }
};

2.安装bootstrap

安装bootstrap依赖，这里的@3是安装bootstrap3.x版本，也可以安装最新版。

cnpm install bootstrap@3 -S

在main.js中导入jquery和bootstrap

import Vue from 'vue'
import App from './App.vue'

import $ from "jquery"
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.min.js";

Vue.config.productionTip = false

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

3.测试

修改App.vue，在页面中加入bootstrap特有的样式，看能否正常显示。这里使用的一个按钮样式

运行结果如下图所示，则表示成功啦