How to introduce jquery in vue-cli webpack (detailed tutorial)

I use the webpack template to introduce jquery into the project generated by vue-cli. First, add "jquery": "^2.2.3" to the dependencies in package.json, and then install. Please refer to the specific content for details. Next article

After spending an entire afternoon today, I finally introduced jquery into the project generated by vue-cli and recorded it. (webpack for templates)

First add "jquery" : "^2.2.3" to the dependencies in package.json, and then install

Add it to webpack.base.conf.js

var webpack = require("webpack")

Add at the end of module.exports

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]

Then be sure to run dev again

Introduce it in main.js and it will be okimport $ from 'jquery'

Let’s take a look at how to introduce jquery into vue

1. npm install jquery

npminstall jquery --save

2. build /webpack.base.conf.js

plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery:"jquery",
$:"jquery"
 })]

3. Introduce jquery

import $ from 'jquery'

4 into main.js. eslint

The next step is to modify .eslintrc in the root directory. js file, in the module.exports of the modified file, just add a key-value pair jquery: true for env.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Solving the problem of hot deployment not detecting file changes in Webpack

In webpack-dev-server Achieve automatic page update

Achieve magnifying glass through jquery technology

How to use Puppeteer image recognition technology to implement Baidu index crawler

The above is the detailed content of How to introduce jquery in vue-cli webpack (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!