Vue CLI3.0中使用jQuery和Bootstrap的方法
作者:冬瓜不削皮 发布时间:2023-07-02 17:08:15
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: 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
来源:https://www.jianshu.com/p/0d0c1eaeb877
猜你喜欢
- 于是就测试了下: var stringToDom=function(text) { var doc; if(window.ActiveXOb
- 一、连接Go语言中的database/sql包提供了保证SQL或类SQL数据库的泛用接口,并不提供具体的数据库驱动。使用database/s
- 一、简介我们来看看对 Vuex 比较专业的介绍:Vuex 是一个专为 Vue 开发的应用程序的状态管理模式,它采用集中式存储管理应用的所有组
- 遇到了这个问题,意思是你的 CPU 支持AVX AVX2 (可以加速CPU计算),但你安装的 TensorFlow 版本不支持解决:1. 如
- 1.apt update && apt install -y curl wget sudo1.设置hostPVE官方要求,/
- numpy作为python科学计算的基础模块,支撑起了pandas、matplotlib等使用。其中,ndarray作为numpy的重要
- 本文实例讲述了python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据。分享给大家供大家参考,具体如下:# -*- c
- 核心代码是 getCookie()部分,控制弹框的显示隐藏则在 created()中。<template> <div v-
- 开发工具:Microsoft Visual Studio 2005 数据库:Microsoft SQL Server 2005 说明:这里建
- 前言手里有一点点公司的股票, 拿不准在什么时机抛售, 程序员也没时间天天盯着看,不如动手写个小程序, 把股票趋势每天早上发到邮箱里,用 py
- 前言基于 Internet的各种服务系统应运而生,建立商业站点或者功能比较完善的个人站点,常常需要记录访问者的一些信息;论坛作为 Inter
- isnull在数据库查询中的应用,特别是再语句连接的时候需要用到 比如连接时候,某个字段没有值但是又要左连接到其他表上 就会显示空, isn
- 背景在 Golang 里面,我们经常使用 channel 进行协程之间的通信。这里有一个经典的场景,也就是生产者消费者模式,生产者协程不断地
- python 的PIL安装是一件很头疼的的事, 如果你要在python 中使用图型程序那怕只是将个图片从二进制流中存盘(例如使用Scrapy
- 该平台会集成UI自动化及api自动化,里面也会涉及到一些简单的HTML等前端,当然都是很基础的东西。在以后的博客里,我会一点点的尽量写详细,
- 问题:如何在报表中每隔N行显示一条粗线如何为报表增加一个行号列?回答:1、在设计模式里打开该报表,在报表主体里面加一个TextBox,把Na
- 引子使用Django在服务器端写了一个API,返回一个JSON数据。使用Ajax调用该API:<!DOCTYPE HTML>&l
- 一、表格与键概念主键:可唯一表示该资料(可以设置多个列表为主键)设置外键进行表与表的相连,且外键必须是其他表的主键(外键也可以设置自己表格的
- 前言一周没有更新博客了,这一周的时间内加强了对机器学习和图像处理的学习。学的有点混乱,有必要记录一下。深度学习可以解决很多问题,但有时候深度
- Python函数参数类型检查有一个很经典的笑话:三个月之前,只有我和上帝知道这代码是干什么的。现在,只有上帝知道了。在Python中,不知道