如何在Vue3.0中引入jQuery并使用
1、安装jQuery需要在项目根目录下使用 npm 命令:npm install jquery --save2、vue.config.js文件在项目根目录下创建一个 vue.config.js 文件(如果已经存在无需创建),进行如下配置:const webpack = require('webpack')module.exports = {configureWebpack: {plugins: [
·
1、安装jQuery
需要在项目根目录下使用 npm 命令:
npm install jquery --save
2、vue.config.js文件
在项目根目录下创建一个 vue.config.js 文件(如果已经存在无需创建),进行如下配置:
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'windows.jQuery': 'jquery'
})
]
}
}
3、.eslintrc.js文件
在项目目录中找到 .eslintrc.js 文件,在 env 中配置 jquery:true
4、最后在 main.js 文件中导入 jQuery
至此完成 jQuery 的引入和配置,可以全局使用。
使用例子
<template>
<div class="home">
<div class="d"></div>
</div>
</template>
<script>
export default {
name: 'Home',
date() {
return {}
},
mounted() {
this.text()
},
methods: {
text() {
$('.d').click(function () {
alert('1')
$(this).hide()
})
}
}
}
</script>
<style lang="less" scoped>
.d {
width: 100px;
height: 100px;
background-color: cadetblue;
}
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)