如何在vue-cli4中使用jquery

最新推荐文章于 2026-06-17 05:05:11 发布

原创最新推荐文章于 2026-06-17 05:05:11 发布 · 5.6k 阅读

6 ·

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

标签

#vue.js

收录于

vue.js 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何在Vue CLI4项目中安装并配置jQuery。首先通过npm安装jQuery，然后创建并编辑vue.config.js文件，使用webpack.ProvidePlugin插件全局引入jQuery，最后在项目中直接使用jQuery。

在vue-cli4中使用jquery

1. 安装jquery
2. 添加vue.config.js文件
3. 引入jquery

1. 安装jquery

npm install jquery --save

2. 添加vue.config.js文件

在这里插入图片描述
我的项目生成后是没有这个文件的，所以要添加vue.config.js

const webpack = require('webpack')
 
module.exports = {
  chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }])
  }
}