vue: Two or three questions about referencing jquery

webpack version: 3.6.0

The first is to reference jquery.

There are two places to change.

1 (project address)/build/webpack.base.conf.js

2 (project address)/src/main.js

webpack.base.conf.js:

(1) Introduce webpack variables under 'use strict'.

const webpack = require('webpack')

(2) module.exports object:

(Modify if there is, add if not.)

resolve object:

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js' ,
       '@': resolve('src' ),
       'jquery': 'jquery'
    }
  },

plugins object:

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

main.js:

import $ from 'jquery'

Just put it together with other imports.

We can verify that the introduction was successful.

Just find a vue file:

mounted () {    
    $('body').css({
      'background-color':'#efefef'
    })
  },

It can be found that the background color of the page is indeed changed.