之前在写我的个人博客，技术选型的时候博客页面选的是vue+bootstrap。用vue-cli3搭完项目结构后开始配环境，装bootstrap。熟悉bootstrap的小伙伴都知道，bootstrap是基于jQuery的，在引入bootstrap之前一定要引入jquery，那么如何同时在vue-cli3中使用bootstrap呢？这篇文章我们就来述说。
安装jQuery
bootstrap是基于jQuery的，在使用之前我们先安装一下jQuery包
cnpm install jquery -S
由于vue-cli3和vue-cli2的目录结构不一样，在vue-cli2所有的配置项都是在vue.config.js 中，在vue-cli3中可能没有这个文件夹，所有需要我们手动添加，注意要和package.json文件保持同级。
在新建的vue.config.js文件中添加一下代码，这样jQuery的配置就完成了。
/*
*Vue-CLI项目的核心配置文件
*/
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
安装bootstrap
接下来我们安装bootstrap依赖，这里的@3是安装bootstrap3.x版本，不喜欢这个版本的小伙伴也可以安装最新版。
cnpm install bootstrap@3 -S
在main.js中导入bootstrap
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入bootstrap
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
这样就可以在vue-cli3中使用bootstrap了
更多文章访问个人博客：http://www.lfanliu.top
