How to call jquery package in vue-Vue.js-php.cn

How to call jquery package in vue

coldplay.xixi

Release： 2023-01-13 00:44:58

Original

4580 people have browsed it

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 .

How to call jquery package in vue

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"

Copy after login

Reference the jQuery package

How to call jquery package in vue

##The second step

cd your project name

Enter the project folder

Run

npm install jquery --save-dev

Copy after login

Install the jQuery package

How to call jquery package in vue

Third Step

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

Add a line at the top:

var webpack=require(&#39;webpack&#39;)

Copy after login

How to call jquery package in vue

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"      
}) ],

Copy after login

How to call jquery package in vue

Step 5

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

import $ from &#39;jquery&#39;

Copy after login

Reference jquery

How to call jquery package in vue

Six steps

In the test component case HelloWorld.vue

Add HTML code

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

Copy after login

Add JS code

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

Copy after login

How to call jquery package in vue

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

How to call jquery package in vue

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!