Vue3.0中如何引入jQuery并使用

1.安装jquery

终端使用 npm 命令安装：

npm install jquery --save

2.找到babel.config.js文件

有的小伙伴可能项目结构不一样文件名字会有点不一样可能是.eslintrc.js文件，接下来我们在env中配置 jQuery：true

3.找到项目的根目录vue.config.js文件

如果在没有的情况下，可以创建一个，一般情况下新建项目是自动生成的，然后如下进行配置：

const webpack = require("webpack");
module.exports = {configureWebpack: {plugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","windows.jQuery": "jquery",}),],},
};

4.最后在main.js文件中导入jquery

import $ from 'jquert'

但是个人爱好一般使用

import jquery from 'jquert'

这是jQuery 的引入与配置，可以全局使用。

使用案例，简单的一个点击事件：点击消失隐藏

<!-- eslint-disable vue/multi-word-component-names -->
<template><div class="one"><div class="d">嗯哼</div><p class="ww">踹出来了</p></div>
</template>
<style lang="less">
.loginbox {display: none;
}
</style>
<script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname: "one",date() {return {};},mounted() {this.text();},methods: {text() {// eslint-disable-next-line no-undef$(".d").click(function () {// eslint-disable-next-line no-undef$(".ww").toggle();});},},
};
</script><style lang="less" scoped>
.d {color: aliceblue;background-color: rgb(82, 199, 71);
}
.d:hover {cursor: pointer;
}
</style>

点击前：

点击后隐藏：

此篇到此结束！

Vue3.0中如何引入jQuery并使用相关推荐

vue3.0中使用Element-plus默认英文组件修改为中文
vue3.0中使用Element-plus默认英文组件修改为中文修改方法说明:本方法Element-plus 1.0.2-beta.59 之前的版本可以,1.0.2-beta.59之后版本请看下一篇 ...
Vue3.0中的变化
1.Vue3 简介 2020 年 9 月 18 日,Vue.js 发布 3.0 版本,代号:One Piece(海贼王) 2.Vue3 带来了什么 1.性能的提升打包大小减少 41% 初次渲染快 5 ...
vue3.0中props父子传值的改动
前言: 对vue3.0的学习以及对技术更新升级内容的整理与使用,这里分析下他的props父子传值的改动. vue官方入口目录一.vue2.0中props的用法 1.父组件中 a.vue中 2.子组 ...
vue3.0中找不到组件或者找不到对应的类型声明。怎么解决
vue3.0中找不到组件或者找不到对应的类型声明如何解决? 这里报错 .报错原因报错就是ts影响找不到组件模块或者找不到对应的类型声明 typescript 只能理解 .ts 文件,无法理解 . ...
vue3.0中setup使用(两种用法)
这篇文章主要介绍了vue3.0中setup使用,本文通过两种用法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下一.setup函数的特性以及作用可以确定的是 V ...
vue3.0中使用elementUi(element-plus的使用)
element-plus的使用小朋友,你是不是有很多问号❓❓❓ 甲:为什么在vue3.0中不能使用Element UI了? 乙:由于vue3.0在插件install函数的入参从Vue原型(类)改成了 ...
在vue3.0中如何去除网址中的#
vue的history模式的实现在vue3.0中如何去除网址中的#号 history模式在vue3.0中如何去除网址中的#号事情是这样的,最近在用vue写一个商场的项目,当时对于页面网址美观程度 ...
学习笔记——vue3.0中的性能优化
前言前端的性能优化主要从如何更快.如何更小.如何更省三个方面考虑. 更快可以从算法层面优化,使代码执行步骤更少:更小可以尝试减小文件体积,使用webpack压缩代码,压缩图片等:更省可以从如何减少h ...
在vue3.0中安装并使用echarts
(vue3.0安装并使用echarts) 1. 安装echarts npm install echarts --save 2. main.js import { createApp } from 'v ...

Vue3.0中如何引入jQuery并使用

1.安装jquery

2.找到babel.config.js文件

3.找到项目的根目录vue.config.js文件

4.最后在main.js文件中导入jquery

Vue3.0中如何引入jQuery并使用相关推荐

最新文章

热门文章