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

在说正事之前，我要推荐一个福利：（你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)，好了下面开始说正事：

下面是原来的引入方式

<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>

###

import $ from 'jquery'

后面加一句 window.$ = $;

###

$应该可以打印出来吧？你看看效果是不是被覆盖了，你把.index宽高改小点看看

郑重声明：本站部分内容转载自网络，版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们（QQ/微信153890879）修改或删除，多谢。

相关文章阅读