在vue-cli3中如何引入bootstrap和jquery

之前在写我的个人博客，技术选型的时候博客页面选的是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