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编写textarea输入字数限制代码
Mar 23 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
详解jquery和vue对比
Apr 16 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
Jquery $.map使用方法实例详解
Sep 01 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 前一天或后一天的日期
2008/06/28 PHP
第六章 php目录与文件操作
2011/12/30 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
Laravel实现表单提交
2017/05/07 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
采用call方式实现js继承
2014/05/20 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
生物科学专业自荐书
2014/06/20 职场文书
公司股东合作协议书
2014/09/14 职场文书
python中的plt.cm.Paired用法说明
2021/05/31 Python
新手入门Mysql--sql执行过程
2021/06/20 MySQL
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
python神经网络ResNet50模型
2022/05/06 Python