Vue 中使用jquery: Cannot find name ‘$‘. Did you mean the instance member ‘this.$‘?

报错原因

在vue + ts项目中使用 jquery 全局注册后 没有在 ts 声明文件中添加jquery声明

报错内容:

Cannot find name '$'. Do you need to install type definitions for jQuery? Try 'npm i @types/jquery'

Cannot find name '$'. Did you mean the instance member 'this.$'?

vue 使用 jquery 全局注册 + 声明

1. 安装jquerynpm i jquery -S
2. 在 vue.config.js 中添加 jquery 插件配置 配置完成可直接在vue 中使用 $ 来使用jquery, 不需要挂载到 vue 原型上

// vue.config.js
const webpack = require('webpack')
module.exports = {
     
  configureWebpack: {
     
    plugins: [
      new webpack.ProvidePlugin({
     
        $: 'jquery',
        jQuery: 'jquery'
      })
    ]
  }
}

3. ts 中需要再配置 xxx.d.ts, 解决 tslint 报错, 找不到 $
   在项目目录 src 下新建 global.d.ts , 添加以下声明 (也可以在现有的文件 shims-vue.d.ts 中添加)

declare let $: any;

添加全局声明后

官方文档 - 全局声明