本篇文章给大家带来的内容是关于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 符号，默认安装第四版。
第二步：配置 main.js
引入 Boostrap 请看配置文件。
立即学习“前端免费学习笔记（深入）”；
//main.jsimport Vue from "vue";import App from "./App.vue";import router from "./router";import store from "./store";//在这里引入 bootstrap。默认只引入 bootstrap 中的 js，css 需要另外引入，我的 bootstrap.ss 在APP.vue中引入的import "bootstrap";//也可以在这里引入 bootstrap.css ;//import "bootstrap/dist/css/bootstrap.css";Vue.config.productionTip = false;new Vue({ router: router, store: store, render: h => h(App)}).$mount("#app");
登录后复制
我的 APP.vue 的配置，只是引入 bootstrap.css，代码仅供参考。
// 因为我的 bootstrap 文件经过了我自己的调整，所以单独放在 assets 文件夹中做单独引入。//如果你只是想使用原生的 bootstrap，直接在 main.js 中引入 css 文件即可。@import "./assets/css/bootstrap.css";
登录后复制
第三步：配置 vue.config.js 文件
Vue CLI3.0 中的所有配置都在 vue.config.js 文件，你在这里配置好，脚手架自动使用你的配置覆盖掉默认的配置。
如果你的项目中没有 vue.config.js 文件，请你在 package.json 文件的同级目录新建一个 vue.config.js 文件。文件内具体的配置如下：
const webpack = require("webpack");module.exports = {//configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方，你在这里设置，会新建或者覆盖 webpack 默认配置。//webpack ProvidePlugin 的含义是创建一个全局的变量，使这个变量在 webpack 各个模块内都可以使用。这里的配置含义是创建 '$'、'jQuery'、'window.jQuery' 三个变量指向 jquery 依赖，创建 'Popper' 变量指向 popper.js 依赖。 configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'] }) ] }}
登录后复制
第四步：具体使用范例
我做了一个 tooltip 的示例，鼠标放上去会出现 tooltip 提示
//templateexport default { name: "componentsTooltips", mounted: function() { //在页面加载完毕后初始化 tooltip， 相当于$(function(){ $('[data-toggle="tooltip"]').tooltip(); } $('[data-toggle="tooltip"]').tooltip(); }};
登录后复制
如果 eslint 报误，请设置 .eslintrc.js 文件。
module.exports = { env: { node: true, jquery: true }};
登录后复制
本人测试结果如下：
以上就是Vue CLI3.0中使用jQuery和Bootstrap的教程（详细步骤）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2732800.html
