How to call jquery package in vue

How vue calls the jquery package: first reference the jQuery package and enter the project folder; then install the jQuery package, find the scaffolding build folder and add relevant code; finally reference jquery and display it in the pop-up window .

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

【Recommended related articles: vue.js】

How vue calls the jquery package:

One step

Add a line to dependencies in package.json

"jquery" : "^3.2.1"

Reference the jQuery package

##The second step

cd your project name

Enter the project folder

Run

npm install jquery --save-dev

Install the jQuery package

Third Step

Find the webpack.base.conf.js file under the scaffolding build folder

Add a line at the top:

var webpack=require('webpack')

Step 4

Find the webpack.base.conf.js file in the scaffolding build folder

add plugins to module.exports:

[          
new webpack.ProvidePlugin({                
$:"jquery",                
jQuery:"jquery",               
"windows.jQuery":"jquery"      
}) ],

Step 5

Add a line in main.js in the entry file of the project

import $ from 'jquery'

Reference jquery

Six steps

In the test component case HelloWorld.vue

Add HTML code

<h1 id="test">Test Jquery</h1>

Add JS code

$('#test').click(function(){    alert('Test Jquery Success!');});

Step 7

npm run dev to compile and then enter 127.0.0.1:8080 in the browser

Visit the page and click Test Jquery

If the pop-up window displays Test Jquery Success!

indicates that JQuery is referenced successfully

Related free learning recommendations: javascript(video)

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