vue 组件中使用jquery 模板

先看效果：

 

博主是在首页插入了轮播图“资源”， 这个轮播图是通过jquery 实现的， 那么vue 中怎么引入呢？ 请继续往下看：

 

1、 安装jquery 插件：

npm install -S jquery

 

 

 2、 安装成功就可以使用了， 下面需要替换掉 轮播图中的jquery.js 换成我们安装的：

 

 

3、 在组件中引入css与js：

 

通过上面这几步， 我们就可以正常展示了， 

 

初学的小伙伴可能不知道HTML怎么更改， 下面我将提出我上面页面的源码：

注意： 标签 <div class="htmleaf-container"> </div>  中的 所有内容都是轮播图的代码， 预祝各位小伙伴ctrl + c 、 ctrl + v 开发顺利 

<template>
  <div class="home">
    <div class="htmleaf-container">
      <div class="holderCircle">
        <div class="dotCircle">
            <span class="itemDot active itemDot1" data-tab="1">
                <i class="fa fa-life-ring"></i>
                <span class="forActive"></span>
            </span>
          <span class="itemDot itemDot2" data-tab="2">
                <i class="fa fa-bomb"></i>
                <span class="forActive"></span>
            </span>
          <span class="itemDot itemDot3" data-tab="3">
                <i class="fa fa-heartbeat"></i>
                <span class="forActive"></span>
            </span>
          <span class="itemDot itemDot4" data-tab="4">
                <i class="fa fa-leaf"></i>
                <span class="forActive"></span>
            </span>
          <span class="itemDot itemDot5" data-tab="5">
                <i class="fa fa-magic"></i>
                <span class="forActive"></span>
            </span>
          <span class="itemDot itemDot6" data-tab="6">
                <i class="fa fa-pencil-square-o"></i>
                <span class="forActive"></span>
            </span>
          <span class="itemDot itemDot7" data-tab="7">
                <i class="fa fa-rss-square"></i>
                <span class="forActive"></span>
            </span>
          <span class="itemDot itemDot8" data-tab="8">
                <i class="fa fa-ship"></i>
                <span class="forActive"></span>
            </span>
          <span class="itemDot itemDot9" data-tab="9">
                <i class="fa fa-truck"></i>
                <span class="forActive"></span>
            </span>
          <span class="itemDot itemDot10" data-tab="10">
                <i class="fa fa-pied-piper"></i>
                <span class="forActive"></span>
            </span>
        </div>
        <div class="contentCircle">

          <div class="CirItem active CirItem1">
            {{ text }}
          </div>
          <div class="CirItem CirItem2">
            {{ text }}
          </div>
          <div class="CirItem CirItem3">
            {{ text }}
          </div>
          <div class="CirItem CirItem4">
            {{ text }}
          </div>
          <div class="CirItem CirItem5">
            {{ text }}
          </div>
          <div class="CirItem CirItem6">
            {{ text }}
          </div>
          <div class="CirItem CirItem7">
            {{ text }}
          </div>
          <div class="CirItem CirItem8">
            {{ text }}
          </div>
          <div class="CirItem CirItem9">
            {{ text }}
          </div>
          <div class="CirItem CirItem10">
            {{ text }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "@/assets/js/circle"
import "@/assets/css/htmleaf-demo.css";
import "@/assets/css/circle.css";

export default {
  name: "Home",
  data() {
    return {
      text: 'Welcome Auto Test Platform'
    }
  },
}
</script>
<style scoped>
.home {
  width: auto;
  height: 100%;
  background-color: #262632;
}

</style>