vue项目中全局引用jquery

步骤

1. 使用命令下列命令安装jQuery；

   npm install jquery --save

   注意：该命令的后缀为--save，也就是该命令安装完jquery后，会将依赖添加到package.json文件的dependencies对象里；如果后缀是--save-dev，则依赖是加到package.json文件的devDependencies对象里。这两个命令的区别就是前者是发布时需要的依赖，后者是开发是需要的依赖。

2. 在项目的根目录下的build目录下找到webpack.base.conf.js文件，在开头添加webpack引入，如下：

   const webpack = require('webpack')

    

3. 在webpack.base.conf.js配置文件的module。exports对象中添加如下代码：

     plugins: [
       new webpack.ProvidePlugin({
         $: "jquery",
         jQuery: "jquery",
         jquery: "jquery",
         "window.jQuery": "jquery"
       })
     ],

   笔者的添加位置如下图所示：

4.重新编译项目使修改生效：

 npm run dev

5.在入口文件（使用vue-cli脚手架生成的项目结构下是main.js）添加引入如下：

import $ from 'jquery'

6.测试（同样以vue-cli生成的项目初始结构为例），在App.vue的script标签里加入代码后如下：

<script>
  //添加的测试代码
  $(function () {
      alert('success');
  });
  
  export default {
    name: 'App'
  }
</script>

打开浏览器后会弹出success弹窗则引入成功！！！