Vue CLI3.0中使用jQuery和Bootstrap的方法


Posted in jQuery onFebruary 28, 2019

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.js

import 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,代码仅供参考。

<style>
// 因为我的 bootstrap 文件经过了我自己的调整,所以单独放在 assets 文件夹中做单独引入。
//如果你只是想使用原生的 bootstrap,直接在 main.js 中引入 css 文件即可。
@import "./assets/css/bootstrap.css";
</style>

第三步:配置 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 提示

//template
<template>
 <div class="content-wrap">
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
  <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
  <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
  <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
 </div>
</template>


<script>
export default {
 name: "componentsTooltips",
 mounted: function() {
  //在页面加载完毕后初始化 tooltip, 相当于$(function(){ $('[data-toggle="tooltip"]').tooltip(); }
  $('[data-toggle="tooltip"]').tooltip();
 }
};
</script>

如果 eslint 报误,请设置 .eslintrc.js 文件。

module.exports = {
 env: {
  node: true,
  jquery: true
 }
};

本人测试结果如下:

Vue CLI3.0中使用jQuery和Bootstrap的方法

参考文档:

Vue CLI3.0: https://cli.vuejs.org/zh/guide/webpack.html

Bootstrap tooltip :https://v3.bootcss.com/javascript/#tooltips

Stackoverflow: https://stackoverflow.com/questions/42684661/adding-bootstrap-to-vue-cli-project

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery.parseJSON()函数详解
Feb 28 #jQuery
jQuery each和js forEach用法比较
Feb 27 #jQuery
jQuery中each和js中forEach的区别分析
Feb 27 #jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 #jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 #jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 #jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 #jQuery
You might like
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python字符串处理函数简明总结
2015/04/13 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
python实现感知器
2017/12/19 Python
python进行两个表格对比的方法
2018/06/27 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Python class的继承方法代码实例
2020/02/14 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
半年思想汇报
2013/12/30 职场文书
工作失职检讨书范文
2014/01/16 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL