Home > Web Front-end > Vue.js > How to install jq in vue.js

How to install jq in vue.js

藏色散人
Release: 2020-12-17 16:33:59
Original
4477 people have browsed it

How to install jq in vue.js: First install JQuery through the command "npm install jquery --save"; then modify the configuration file; then introduce JQuery in the main.js file; and finally restart the project.

How to install jq in vue.js

The operating environment of this tutorial: windows7 system, vue2.0&&jquery1.0 version. This method is suitable for all brands of computers.

Recommended: "vue tutorial"

Install and use JQuery for ajax requests and a small number of DOM operations

vue.js The data rendering method is already very convenient and powerful, and there is no need to use JQuery for this operation

1. Install JQuery

npm install jquery --save
Copy after login

2. Modify the configuration file after successful installation

## Add the following code to the file webpack.base.conf.js under the #build folder:

Add the header and introduce the file:

var webpack=require("webpack")
Copy after login

Add

# to module.exports ##

plugins: [
 new webpack.ProvidePlugin({
 jQuery: "jquery",
 $: "jquery"
 })
]
Copy after login

3. Introduce JQuery into the main.js file

import $ from 'jquery'
//或   
import jQuery from 'jquery'
Copy after login

4. Restart the project

npm run dev 
//或  
npm run start
Copy after login

5. Access the packaged index.html file by npm run build The final js and css files cannot be found because the path is pointed incorrectly

Modify the index.js configuration in the config folder

Original configuration:

How to install jq in vue.jsModify to add a little bit.

The above is the detailed content of How to install jq in vue.js. 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