How to use jquery in vue

How to use jquery in vue: First use NPM to install jQuery, and run the relevant code in the project root directory; then configure webpack, the code is [var webpack = require('webpack')].

The operating environment of this tutorial: windows7 system, Vue2.9.6&&jquery3.2.1 version, DELL G3 computer.

【Recommended related articles: vue.js】

How to use jquery in vue:

1. NPM install jQuery, run the following code in the project root directory

npm install jquery --save

2. Webpack configuration

is in the build directory in the project root directory Find the webpack.base.conf.js file and use the following code at the beginning to introduce webpack because this file is not referenced by default.

var webpack = require('webpack')

Then add a piece of code in module.exports,

// 原有代码
resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
 }
},
// 添加代码
plugins: [
 new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
 })
],
// 原有代码
module: {
 rules: [
// ......
 ]
}

Then many other solutions say that importing it in main.js is enough, but the questioner did so .

Import jQuery in main.js

import 'jquery'

Use $ or jQuery in the Vue component to write the code to operate the dom

Then start the project

npm run dev

But the compilation reported an error:

http://eslint.org/docs/rules/no-undef '$' is not defined or

http: //eslint.org/docs/rules/no-undef 'jQuery' is not defined

What's going on? ? ?

3.eslint check

Smart friends must have thought that it is related to eslint. Yes, the next step you need to do at this time is to modify .eslintrc in the root directory. js file, in the module.exports of the modified file, add a key-value pair jquery: true for env, that is:

env: {
 // 原有
 browser: true,
 // 添加
 jquery: true
}

againnpm run dev , OK, no error reported, quickly go to the component and try it, console.log($('selector')), you will find that the DOM has been successfully obtained using jQuery.

Related free learning recommendations: javascript(Video)

The above is the detailed content of How to use jquery in vue. For more information, please follow other related articles on the PHP Chinese website!