vue项目中全局引用jQuery

原文链接:vue项目中全局引用jquery_山不在高的博客-CSDN博客_vue全局引入jq

1.下载安装jqurey

npm install jquery --save          //发布时
npm install jquery --save-dev      //开发时

2.根目录下找到vue.config.js文件，在开头添加webpack引入

const webpack = require('webpack')  //添加webpack

3.vue.config.js文件，module.exports对象里找到  configureWebpack,添加plugins的内容

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

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

 npm run dev

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

import 'jquery'

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

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

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