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 EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
php下删除字符串中HTML标签的函数
2008/08/27 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
php 无法载入mysql扩展
2010/03/12 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
IE下js调试工具Companion.JS
2010/10/15 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
Python正则抓取网易新闻的方法示例
2017/04/21 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python多继承顺序实例分析
2018/05/26 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
python如何编写win程序
2020/06/08 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
环境工程毕业生自荐信
2013/11/17 职场文书
会议邀请函范文
2014/01/09 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers