如何在Vue CLI3.0中使用jQuery和Bootstrap

在Vue中使用jQuery和Bootstrap并不是特别符合Vue原生的写法，但是有时候会用到，所以我把我的导入设置放出来供大家参考。

在Vue CLI2.0中引入jQuery和Bootstrap需要设置很多配置项。网上有很多方法，这里不再赘述。直接进入Vue CLI3.0配置步骤。

第一步：安装 jQuery、Bootstrap 和 popper.js 依赖项。

其中popper.js用于Bootstrap中显示弹窗、提示、下拉菜单，所以需要引入。

npm install jquery bootstrap@3 popper.js --save

注：上面的bootstrap@3是指安装Bootstrap的第三个版本。如果不添加@3符号，则默认安装第四个版本。

第2步：配置main.js

Boostrap介绍请参见配置文件。

//main.js

从“vue”导入 Vue；
从“./App.vue”导入应用程序；
从“./router”导入路由器；
从“./store”导入商店；
//这里引入bootstrap。默认只导入bootstrap中的js。 CSS需要单独导入。我的www.sychzs.cn是在APP.vue中引入的。
导入“引导程序”；
//这里也可以引入bootstrap.css；
//导入“bootstrap/dist/css/bootstrap.css”;

Vue.config.生产提示 = false;

新Vue({
 路由器： 路由器，
 商店： 商店，
 渲染：h => h(应用程序)
}).$mount("#app");

我的APP.vue的配置只是引入了bootstrap.css，代码仅供参考。

第3步：配置vue.config.js文件

Vue CLI3.0 中的所有配置都在 vue.config.js 文件中。一旦您在此处配置，脚手架将自动使用您的配置覆盖默认配置。

如果您的项目中没有 vue.config.js 文件，请在 package.json 文件所在的目录中创建一个新的 vue.config.js 文件。文件中具体配置如下：

const webpack = require("webpack");

模块. 导出 = {
//configureWebpack是Vue CLI3.0中用来配置webpack插件参数的地方。如果在这里设置，它将创建或覆盖 webpack 的默认配置。
//webpack ProvidePlugin的意义是创建一个全局变量，使得这个变量可以在webpack的各个模块中使用。这里的配置含义是创建三个变量'$'、'jQuery'和'window.jQuery'来指向jquery依赖，创建一个'Popper'变量来指向popper.js依赖。
  配置Webpack：{
    插件：[
      新的 webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        波普尔：['popper.js'，'默认']
       })
    ]
   }
}

第四步：具体使用示例

我做了一个工具提示示例。鼠标放在上面会出现tooltip提示

//模板

如果eslint报错，请设置.eslintrc.js文件。

模块. 导出 = {
 环境：{
  节点：真，
  jquery: 正确
 }
};

我的测试结果如下：

参考文档：

Vue CLI3.0：https://www.sychzs.cn/zh/guide/webpack.html

引导工具提示：https://www.sychzs.cn/javascript/#tooltips

Stackoverflow：https://www.sychzs.cn/questions/42684661/adding-bootstrap-to-vue-cli-project