Home > Web Front-end > Vue.js > Does vue.js support jquery?

Does vue.js support jquery?

青灯夜游
Release: 2020-11-30 13:37:05
Original
3605 people have browsed it

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.

Does vue.js support jquery?

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
Copy after login

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')
Copy after login

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: [// ...... ]
}
Copy after login

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'
Copy after login

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

Then start the project

npm run dev
Copy after login

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}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template