VUE3+TS 引入JQuery

最新推荐文章于 2025-11-25 09:24:07 发布

原创最新推荐文章于 2025-11-25 09:24:07 发布 · 4k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

当前文章被收录于：

Vue

31 篇文章 0 人学习

Vue前端开发中遇到的各种问题异常总结

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何将jQuery集成到Vue项目中，包括安装jQuery及其类型定义，配置Vue以使用jQuery，并在Vue项目中正确引入和使用jQuery的方法。

先执行如下安装命令，安装jquery

npm install jquery
npm install  @types/jquery

然后在main.ts中引入

import $ from 'jquery'
createApp(App).use($)

在shims-vue.d.ts 配置

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
declare module jquery {}

再在配置vue,.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
var webpack = require('webpack')

module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080, // 端口号
        https: false, // https:{type:Boolean}
        open: true, // 配置自动启动浏览器
        // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
        // 配置多个代理
        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            }
        }
    },
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'windows.jQuery': 'jquery'
            })
        ]
    }
}

标签

#vue.js #jquery #webpack