vue怎样使用基于jquery的插件？

Question

下面是原来的引入方式

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ripples.js"></script>

下面是我在vue中的使用方式 这样引入对吗 jquery已经用npm方式安装好了 可是试了一下没有这个jquery效果怎么办？是不是jquery.ripples.js引入的方式不对 mounted中的代码就是原来js里面的全部代码
页面效果是这样的链接

<template>
  <div class="index">
    <img style="width:700px;height:108px" src="http://yueda-file.oss-cn-shenzhen.aliyuncs.com/457faaf4308b3c9c361e6b1f04fadfb0.png">
    <div class="content">
        <input placeholder="请输入用户名" class="ipt1" type="text">
        <input placeholder="请输入密码" class="ipt2" type="text">
        <div class="remember">
            <div>
                <input id="food_c" type="checkbox" name="food">
                <label for="food_c">记住密码</label>
            </div>
            <div style="border-bottom:1px solid white">
                忘记密码?
            </div>
        </div>
        <div class="login1">
        </div>
        <div class="login2">
        
        </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import '../../static/jquery.ripples.js'
export default {
  name: 'Index',
  data () {
    return {
    }
  },
  mounted(){
      $(document).ready(function() {
        try {
            $('body').ripples({
                resolution: 512,
                dropRadius: 20,
                perturbance: 0.04,
            });
        }
        catch (e) {
            $('.error').show().text(e);
        }
        $('.disable').show().on('click', function() {
            $('body').ripples('destroy');
            $(this).hide();
        });
    });
  }
}
</script>

<style scoped>
body{
    height: 100vh;
    width: 100%;
    background-image: url(https://www.11-bian.com/tmpImg/7075a4390da44c2ab84a1a2dcbce3631.jpg);
}
.index{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-image: url(https://www.11-bian.com/tmpImg/7075a4390da44c2ab84a1a2dcbce3631.jpg);
    height: 100vh;
    width: 100%;
}
.content{
    width: 736px;
    height: 530px;
    background-image: url(https://www.11-bian.com/tmpImg/df7c5aa79b9e5dd34a806843be40896a.png);
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ipt1{
    margin-top: 150px;
    width: 432px;
    height: 32px;
    border: 0;
    outline: none;
    padding-left: 4px;
    box-sizing: border-box;
    border-radius: 2px
}
.ipt1:focus { 
    outline:none; 
    border: 1px solid #3679DD; 
} 
.ipt2{
    margin-top: 20px;
    width: 432px;
    height: 32px;
    border: 0;
    outline: none;
    padding-left: 4px;
    box-sizing: border-box;
    border-radius: 2px
}
.ipt2:focus { 
    outline:none; 
    border: 1px solid #3679DD; 
}
.remember{
    display: flex;
    justify-content: space-between;
    width: 432px;
    margin-top: 20px
}
</style>

Answer 1

import $ from 'jquery'

后面加一句 window.$ = $;