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绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jquery插件开发模式实例详解
Jul 20 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
简单的js表格操作
2016/09/24 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Python实现上下文管理器的方法
2020/08/07 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
表扬信范文
2015/05/04 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
浅谈Vue的computed计算属性
2022/03/21 Vue.js
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android