vue +jquery 配置及问题

vue项目同时使用jquery

步骤一:首先安装jquery

    $npm install jquery --save

步骤二:在vue.config.js中添加代码

image.png

步骤三：在main.js中引用$

  $import $ from 'jquery'

此时会有问题编译时报 ,就会有这样一个错误，这个是因为在VS Code编写Vue代码时使用ESLint编译js，$不符合eslint检测的环境导致的，所以我们需要进行一下环境配置。

步骤四：

方式1.修改ESLint的检查环境，增加jquery即可

image.png

方式2.设ESLint规则，忽略指定错误，例如no-console可见上图

问题1：同时使用vue 和 jquery， jquery事件绑定失效

原因是：

vue会重新渲染dom,加上是异步实例vue.所以正常写程序的话jq的$()获取的元素不是vue渲染后的元素.

解决办法：

先加载vue.js，让页面渲染完成后加载jq，给jq绑定ready事件

<script type="text/javascript">
$(document).ready(function(){

    // jq事件
});