jQuery
引入 jQuery 并使用
安装
npm install jquery --save
.eslintrc.js
文件配置
在env中配置 jQuery:true
配置文件:
module.exports = {
root: true,
env: {
node: true,
jQuery: true,
},
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended'
],
parserOptions: {
parser: '@babel/eslint-parser'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}
vue.config.js文件配置
webpack添加jQuery,配置文件:
const { defineConfig } = require('@vue/cli-service')
const CompressionPlugin = require('compression-webpack-plugin');
const { resolve } = require('path');
const webpack = require("webpack")
module.exports = defineConfig({
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
})
]
},
devServer: {
allowedHosts: ['wl.wl_dev']
},
lintOnSave: false,
transpileDependencies: [
'quasar'
],
pluginOptions: {
quasar: {
importStrategy: 'kebab',
rtlSupport: false
}
},
productionSourceMap: false,
chainWebpack(config) {
delete config.plugins['prefetch'];
if(process.env.NODE_ENV !== 'development') {
config.plugin('compressionPlugin').use(
new CompressionPlugin({
test: /\.(js|css|html)$/,
threshold: 10240,
})
)
}
config.module.rules.delete("svg")
const svgRule = config.module.rule("svg-sprite-loader");
svgRule.test(/\.svg$/).include.add(resolve('src/assets/svg')).end()
svgRule.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
})
.end();
},
})
添加内容:
const webpack = require("webpack")
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
})
]
},
在main.js文件中导入jquery
import jquery from 'jquery'
简单示例
<template>
<div class="test">
<div class="click">点我</div>
</div>
</template>
<script>
export default {
name: "test",
date() {
return {};
},
mounted() {
this.text();
},
methods: {
text() {
$(".click").click(function () {
alert(1);
});
},
},
};
</script>
<style >
</style>