vue引入jquery

安装jQuery依赖

在项目根目录下通过npm或yarn安装jQuery：

npm install jquery
# 或
yarn add jquery

配置webpack

在vue.config.js中配置webpack的ProvidePlugin插件（若无此文件需新建）：

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ]
  }
}

全局引入方式

在main.js中直接引入并挂载到Vue原型上：

import $ from 'jquery'
Vue.prototype.$ = $

按需引入方式

在单个组件中局部引入：

import $ from 'jquery'
export default {
  mounted() {
    $(this.$el).hide() // 使用示例
  }
}

TypeScript支持

若使用TypeScript，需在shims-vue.d.ts中添加类型声明：

declare module 'jquery' {
  const $: any
  export default $
}

注意事项

• 避免与Vue的DOM操作混用，优先使用Vue的ref和原生指令
• jQuery版本建议选择3.x+以获得更好的兼容性
• 大型项目推荐使用vue-jquery插件进行更规范的集成