Vue-CLI中引入jQuery并写一个轮播图

想在Vue-CLI项目中使用轮播图，轮播图的代码是根据自己需求作了修改的别人的代码，其中用到jQuery。
需求：
1.写出轮播图的代码
2.在Vue-CLI中引入jQuery
3.将轮播图的代码放入项目中封装为组件

1.将jq引入到vue-VLI中

A. 安装jQuery

npm install jquery –save

安装成功后package.json显示：（应该是默认安装最新版本）

B. 配置vue.config.js（框内新增）

C. 在main.js中引入

import $ from 'jquery'

D. 测试

<script>
export default {}
$(function () { //这里面写jQuery代码
  console.log('引入成功')
})
</script>

2. 轮播图代码嵌入

HTML:

<template>
  <div class="slide">
    <div class="img">
      <ul id="slide_img">
        <!-- 实现无缝衔接，即最后一张顺畅地跳转到第一张，故在写html的时候，
                再重复了最后一张图片，然后通过直接定位，在轮播到最后一张图片的时候，
                将整个ul定位到第一张，由于第一张和最后一张是一样的，故效果看起来则顺畅自然的轮播。 -->
        <li><img src="@/assets/img/1.jpg" /></li>
        <!--处理无缝衔接的图片-->
        <li><img src="@/assets/img/2.jpg" /></li>
        <li><img src="@/assets/img/3.jpg" /></li>
        <li><img src="@/assets/img/4.jpg" /></li>
        <li><img src="@/assets/img/1.jpg" /></li>
      </ul>
    </div>
    <ul id="num">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="btn">
      <span id="left">&lt;</span>
      <span id="right">&gt;</span>
    </div>
  </div>
</template>

CSS:

<style scope>
* {
  margin: 0;
  padding: 0;
}
/* 大盒子 */
.slide {
  position: relative;
  width: 1000px;
  height: 500px;
  margin: 40px auto;
  /* overflow 属性规定当内容溢出元素框时发生的事情。 */
  /* hidden	内容会被修剪，并且其余内容是不可见的。 */
  overflow: hidden;
}
/* 图片盒子 */
/* 整个外部的div是相对定位，
而里面的内容ul则相对于外部div进行绝对定位 */
.img ul {
  position: absolute;
  /* 让第一张图片卡进窗口外面实现无缝循环轮播 */
  left: -1000px;
  width: 5000px;
}
/* 图片列表 */
.img li {
  list-style-type: none;
  /* float 属性实现元素的浮动 */
  float: left;
}
/* 图片 */
img {
  width: 1000px;
  height: 500px;
}
/* 轮播点列表 */
#num li {
  list-style-type: none;
  background-color: white;
  border: 1px solid red;
  border-radius: 100px;
  float: left;
  width: 10px;
  height: 10px;
  margin: 10px;
  cursor: pointer;
}
/* 轮播点 */
#num {
  position: absolute;
  top: 450px;
  left: 800px;
}
/* 箭头 */
.btn {
  font-size: 30px;
  color: red;
  display: none;
}
.slide:hover .btn {
  display: block;
}
/* 左箭头 */
#left {
  position: absolute;
  top: 230px;
  left: 40px;
  cursor: pointer;
}
/* 右箭头 */
#right {
  position: absolute;
  top: 230px;
  right: 40px;
  cursor: pointer;
}
</style>

JS:

<script>
export default {
  // name:'Helloworld'
};
$(function() {
  //   console.log("引入成功");
  $(document).ready(function() {
    initRadius(); //初始化小圆点
  });

  var number = 1; //设置为全局变量

  //轮播图图片主体
  function startSlide() {
    dealRadius(number);
    if (number == 4) {
      number = 0;
      $("#slide_img").css({ left: "0px" }); //处理无缝衔接图
      dealRadius(0); // 处理无缝衔接小圆点的跳转
    }
    number++;
    var imageLeft = -1000 * number;
    $("#slide_img").animate({ left: imageLeft });
  }
  var timer = setInterval(startSlide, 2000);

  //小圆点的轮播实现
  function dealRadius(num) {
    var lis = $("#num li");
    lis.eq(num).css("background-color", "red");
    for (var i = 0; i < num; i++) {
      lis.eq(i).css("background-color", "white");
    }
    for (var i = num + 1; i < 4; i++) {
      lis.eq(i).css("background-color", "white");
    }
  }

  //初始化小圆点
  function initRadius() {
    var lis = $("#num li");
    lis.eq(0).css("background-color", "red"); //将第一个圆点设置为红色
  }

  //左右按钮的实现
  $("#left").mousedown(function() {
    clearInterval(timer);
    if (number == 0) {
      $("#slide_img").css({ left: "-4000px" });
      number = 4;
    }
    var imageLeft = -1000 * (number - 1);
    $("#slide_img").animate({ left: imageLeft });
    number--;
    if (number == 0) {
      dealRadius(3);
    } else {
      dealRadius(number - 1);
    }
  });
  $("#left").mouseup(function() {
    timer = setInterval(startSlide, 2000);
  });

  $("#right").mousedown(function() {
    clearInterval(timer);
    if (number == 4) {
      number = 0;
      $("#slide_img").css({ left: "0px" }); //处理无缝衔接图
    }
    var imageLeft = -1000 * (number + 1);
    $("#slide_img").animate({ left: imageLeft });
    dealRadius(number);
    number++;
  });
  $("#right").mouseup(function() {
    timer = setInterval(startSlide, 2000);
  });

  //小圆点的悬停实现
  $("#num").on("mouseenter", "li", function() {
    // 停止轮播图的自动循环，切换下一张图片，最后通过setInterval重新启动计时器
    clearInterval(timer);
    var _number = $(this).index() + 1;
    number = _number;
    dealRadius(number - 1);
    var imageLeft = -1000 * number;
    $("#slide_img").animate({ left: imageLeft });
    timer = setInterval(startSlide, 2000);
  });

  // 鼠标放在图片上时轮播停止
  var img = document.querySelector(".img");
  img.onmouseenter = function() {
    clearInterval(timer);
  };
  img.onmouseleave = function() {
    timer = setInterval(startSlide, 2000);
    autoPlay();
  };
});
</script>