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-names
name: "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>
点击前:
点击后隐藏:
文章来源:https://www.toymoban.com/news/detail-514442.html
此篇到此结束!文章来源地址https://www.toymoban.com/news/detail-514442.html
到了这里,关于Vue3.0中如何引入jQuery并使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!