vue-cli3 引入jquery

本篇博客转载于https://juejin.im/entry/5b446efde51d45194e0b8985，写在这里只是用于记录。

vue-cli3的所有的配置项都在vue.config.js的文件中进行配置，so步骤搞起来：

第一步：安装jquery

命令行工具，进入项目文件夹，执行：  npm install jquery --save

第二步:确定安装成功

提示安装成功后，在package.json 文件内的 "dependencies"中检查是否有 "jquery": "^3.3.1", （如没有 则需手动添加）如图

第三步： vue.config.js文件里面配一配

在vue.config.js的文件开头添加：

const webpack = require('webpack')

 然后在module.exports中，添加：

configureWebpack: {
    plugins: [
        new webpack.ProvidePlugin({
            $:"jquery",

            jQuery:"jquery",
            "windows.jQuery":"jquery"
        })
    ]
},

第四步：测试

重新启动vue-cli，页面组件中 script标签加如下测试代码，页面能弹出则成功

<script>
export default {
  name: 'HelloWorld'
}
$(function () {
  alert('引入成功')
})
</script>

 

结果图：