Does vue.js support jquery?

vue.js supports jquery. How to use jquery in vue: first use "npm install jquery --save" to install; then configure webpack and import jquery in main.js; finally use jquery code in the required components.

The operating environment of this tutorial: windows10 system, vue2.9, this article is applicable to all brands of computers.

Assuming that you have used vue-cli to build the development scaffolding, next, look at the following.

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

npm install jquery --save

2. Webpack configuration

Find webpack.base in the build directory in the project root directory. conf.js file, 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 the .eslintrc.js file in the root directory. After modifying In the module.exports of the file, just add a key-value pair jquery: true for env, that is:

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

npm run dev again, OK, no error is reported, hurry up and try it in the component. console.log($('selector')) , you will find that you successfully used jQuery to obtain the DOM.

For more programming-related knowledge, please visit: Programming Video Course! !

The above is the detailed content of Does vue.js support jquery?. For more information, please follow other related articles on the PHP Chinese website!