vue中引入jQuery&&&解决＄ is not defined问题

记录一下jquery的安装方法以免忘记。

错误原因

很明显是没有安装jquery依赖包导致的。

解决办法

安装/导入jquery依赖包

npm install jquery --save
//		或者使用淘宝镜像
cnpm install jquery --save

配置文件

旧版本的话，是需要在webpack.base.conf.js（与public和src文件同级之前的版本）里面修改配置文件，这个文件现在在node_modules/@vue/cli-service/，寻找起来比较麻烦。
①在开头使用以下代码引入webpack，

var webpack = require('webpack')

②然后在module.exports中添加一段代码。

 plugins: [ 
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery" 
    }) 
  ]

现在版本的话，直接在src与public文件夹同级目录下建立vue.config.js文件（其中应该是类似配置代理的文件，具体的话不太懂，参考其他文章）

然后后在建立好的文件中加入一下代码

var webpack = require('webpack')

module.exports = {
    lintOnSave: false,
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8000', //建立本地服务器端口可能不一样
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
            })
        ]
    }
}

在main.js中全局导入jquery

import $ from 'jquery'

vue2.0中如下

Vue.config.productionTip = false
new Vue({
    router,
    store,
    $, //添加该行即可
    render: h => h(App)
}).$mount('#app')

vue3.0中的createApp如下，使用use($)

createApp(App).use(router).use($).mount('#app')

最后查看package.json，可以看到版本号，正常使用即可

dependencies": {
    "axios": "^0.21.1",
    "bootstrap": "^5.0.2",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "jquery": "^3.6.0",
    "vue": "^3.1.5",
    "vue-router": "^4.0.10"
  },

链接: 几个步骤解决 vue引入jquery时报错 $ is not defined.
链接: Vue小知识： $ is not defined错误解决.
链接: Vue-cli3 $ is not defined错误解决.