Vue 2.5 调用 jquery 实现动画效果 和 jquery 冲突解决

参考：https://www.cnblogs.com/wxyblog/p/11933929.html

在我目前的版本中 ，因为找不到 webpack.base.conf.js 所以只需要 第一步和第二部就OK了 ，试过了 OK的

1： 在终端输入命令 开始安装 jquery

npm install jquery  --save

或者  npm install jquery@3.6.4 --save   （指定jquery版本）  

2: 在vue 页面中

import $ from 'jquery' 就可以使用jquery了

<template>
        <div class="divFrame">
         <div class="divTitle">
              <input @click="toLeft" id="Button1" type="button" value="左移" class="btn" />&nbsp;
              <input @click="toRight" id="Button2" type="button" value="右移" class="btn" />
         </div>
         <div class="divContent">
              <div class="divList">
                   <span>菜单管理</span>
                   <span>日志管理</span>
                   <span>课件管理</span>
                   <span>密码修改</span>
                   <span>系统管理</span>
              </div>
         </div>
    </div>
</template>

<script lang="ts">

  import $ from 'jquery'

  export default  {
     methods:{
          async toLeft(){
               $(".divList").animate({ left: "-=100px" }, 1000);
           },
          async toRight(){
               $(".divList").animate({ left: "+=100px" }, 1000);
          }
     }
  }
  </script>


<style type="text/css">
body{font-size:13px}
.divFrame{border:solid 1px #666;width:168px;text-align:center;}
.divFrame .divTitle{background-color:#eee;padding:5px 0px 5px 0px}
.divFrame .divContent{width:108px;height:52px;padding:5px 0px 5px 0px;margin:0px 30px 0px 30px;overflow:hidden}
.divFrame .divContent .divList{width:600px;position:absolute}
.divFrame .divContent .divList span{border:solid 1px #ccc;background-color:#eee;width:100px;height:50px;float:left;margin-right:2px}
.btn {border:#666 1px solid;padding:2px;width:60px;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8)}
</style>

到上面就可以使用jquey的滑动效果了，如果你还要使用 拖拽滑动效果的话 ,  可以用到vue-touch

vue-touch的使用方法： 

1：终端指定命令： npm insall vue-touch@next --save

2：

import VueTouch from 'vue-touch'

Vue.use(VueTouch, {name: 'v-touch'})

3：

 <v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">

 </v-touch>

4:整体代码如下：

<template>
        <div class="divFrame">
         <div class="divTitle">
              <input @click="toLeft" id="Button1" type="button" value="左移" class="btn" />&nbsp;
              <input @click="toRight" id="Button2" type="button" value="右移" class="btn" />
         </div>
         <div class="divContent">
              <div class="divList">
                    <v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
                         <span>菜单管理</span>
                         <span>日志管理</span>
                         <span>课件管理</span>
                         <span>密码修改</span>
                         <span>系统管理</span>
                    </v-touch>
              </div>
         </div>
    </div>
</template>

<script lang="ts">

  import $ from 'jquery'
  import { Vue } from 'vue-property-decorator';
  import VueTouch from 'vue-touch'
  Vue.use(VueTouch, {name: 'v-touch'})

  export default  {
     methods:{
          async toLeft(){
               $(".divList").animate({ left: "-=100px" }, 1000);
           },
          async toRight(){
               $(".divList").animate({ left: "+=100px" }, 1000);
          },
          async swiperleft(){
               $(".divList").animate({ left: "-=100px" }, 1000);
          },
          async swiperright(){
               $(".divList").animate({ left: "+=100px" }, 1000);
          },
     }
  }
  </script>


<style type="text/css">
body{font-size:13px}
.divFrame{border:solid 1px #666;width:168px;text-align:center;}
.divFrame .divTitle{background-color:#eee;padding:5px 0px 5px 0px}
.divFrame .divContent{width:108px;height:52px;padding:5px 0px 5px 0px;margin:0px 30px 0px 30px;overflow:hidden}
.divFrame .divContent .divList{width:600px;position:absolute}
.divFrame .divContent .divList span{border:solid 1px #ccc;background-color:#eee;width:100px;height:50px;float:left;margin-right:2px}
.btn {border:#666 1px solid;padding:2px;width:60px;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8)}
.wrapper{ cursor: pointer;}
</style>

====================================================================

解决jquery 版本问题方法 ：

每次 npm install  jquery  都经常出现  jquery跟其它包冲突，导致jquery不能用了，更新发现jquery变成了其它版本，想要解决的可以使用如下方法：

1： 卸载之前的 jquery 并保存在 package.json 中

npm uninstall jquery --save

2： 如果卸载完以后 ，package.json 中没有jquery，则跳过这一步骤， 如果出现jQuery（大写Q)

npm uninstall jQuery --save

3: 安装指定版本

npm install jquery@3.6.4 --save