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
猜你喜欢
- 如题,我们直接使用numpy#!D:/workplace/python# -*- coding: utf-8 -*-# @File : nu
- 本文实例讲述了php输出xml必须header的解决方法。分享给大家供大家参考。具体方法如下:问题描述:最近在做一个xml输出时发现我们直接
- mysql服务启动,但是连接不上,如何解决?登陆报错: root@localhost:~# mysql -u root -p &
- 本文实例为大家分享了Python时间戳使用和相互转换的具体代码,供大家参考,具体内容如下1.将字符串的时间转换为时间戳方法: &n
- 问题是:输入一个数字,按照指定要求逆序输出该数字,很简单,下面是实现:#!usr/bin/env python#encoding:utf-8
- 就在刚才,我给GMAIL安装了Twitter插件。安装完插件后,Gmail提示我要连接Twitter的账号才能使用:我顺着提示操作下去,就看
- 以前工作的时候由于Oracle8i数据库经常出现用户过多的错误,由于数据量大,经常出现ORA:12500错误,但主要原因是访问过多而引起的,
- 常用的module是 os ,os.path 和shutil,所以要先引入他们. python遍历文件夹和文件
- 一、抛出异常和自定义异常Python中使用用异常对象(exception object)表示异常情况,当程序运行遇到错误后,就会触发发异常。
- 两种方法实现:1、在双引号前面加个转义符 \ ,即反斜杠。如"Hello \"W \"orld",会
- 一、概述:Oracle的注册就是将数据库作为一个服务注册到监听程序。客户端不需要知道数据库名和实例名,只需要知道该数据库对外提供的服务名就可
- mysql 5.5 安装配置方法图文教程回忆一下mysql 5.5 安装配置方法,整理mysql 5.5 安装配置教程笔记,分享给大家。My
- 本文实例讲述了Java读取文件及基于正则表达式的获取电话号码功能。分享给大家供大家参考,具体如下:1、正则表达式正则表达式,又称 正规表示法
- 一、脚本说明1、linux系统版本EL6, EL7, EL8, and EL9-based platforms (for example,
- 本文实例讲述了Python实现的直接插入排序算法。分享给大家供大家参考,具体如下:# -*- coding:utf-8 -*-'
- 网页制作中用到的特效字,你一定是用图象处理软件制作的吧!告诉你,不用图象处理软件,我也能做出漂亮的特效字来,你看,阴影字我就是这样做出来的。
- Django 简介Django是一个开放源代码的Web应用框架,由Python写成。采用了MTV的框架模式,即模型M,视图V和模版T。它最初
- 同质化的网站越来越多,往往你还没发展起来,就已有许多站点抄袭走了你的成果,如何留下用户?——让用户有更好的使用体验。一些网页上的小技巧,可以
- 前言在Python开发中,有些情况下,我们可能面临在一台机器上同时安装多版本Python的需求。比如:有多个Python项目,每个项目依赖不
- 昨天我问过这个问题怎么用ADODB.Stream来读取或写入文件,而不是用fso,不过没人回答到点上,今天搞定了.贴出来给觉得有用的朋友,希