How to use jq in vue.js

How to use jq in vue.js: First install jQuery via NPM, the code is [npm install jquery --save]; then configure webpack, the code is [var webpack = require('webpack')]; finally check eslint.

【Recommended related articles: vue.js】

vue.js uses jq Method:

1. Install jQuery via NPM. Run the following code in the project root directory

npm install jquery --save

2. Webpack configuration

Find the webpack.base.conf.js file in the build directory in the project root directory, and use the following code to introduce webpack at the beginning, because the 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 and 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

Wise 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 root directory .eslintrc.js file, in the module.exports of the modified file, add a key-value pair for env jquery: true That’s it, that is:

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

Again npm run dev, OK, no error reported, quickly go to the component and try it, console.log($('selector')), you will find that you successfully used jQuery to obtain the DOM.

Related free learning recommendations: JavaScript(Video)

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