Requirements: Use JQuery in Vue projects

JQuery after successful installation (two methods)

  1. Download the NPM package

    NPM install jquery - saveCopy the code

  2. Download jquery in the vue UI visualization page

  3. After the installation is successful, package.json displays:

Create the vue.config.js file

Create the vue.config.js file in the root directory and configure it

  1. Var webpack = require(‘webpack’)

const webpack = require('webpack')
 
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery".jQuery: "jquery"."windows.jQuery": "jquery"}}})]Copy the code

2. Other configurations (JQuery enabled)

Import in main.js (entry file)

  • Everything in the box is new
import $ from 'jquery'  / / import jquery
Vue.prototype.$ = $   // Attach $(jquery) to vue.prototype and let all vue share this method
Copy the code

test

— Method 1 in $(funtion() {

Write jquery code here

})

<script>
export default {}

$(function () { // Write jQuery code inside
  console.log('Introducing success')
})
</script>
Copy the code

– the method 2

methods:{
        mpanel2(){$('#mpanel2').codeVerify({
                type : 1./ / type
                width : '1000px'.height : '50px'.fontSize : '16px'.codeLength : 6.// Number of verification codes
                btnId : 'check-btn'.ready : function() {},success : function() {
                    alert('Verify a match! ');
                },
                error : function() {
                    alert('Verification code does not match! '); }}); }},mounted(){
        this.mpanel2()
    }
Copy the code

\

“Likes, Favorites and comments”

❤️ Follow + like + add + comment + forward ❤️, encourage me to create better articles, thank you 🙏 everyone.