Vue+Swiper

需要准备的东西:

1.swiper的css和js文件（swiper官网自行下载）

2.cmd中先在文件夹目录下npm install --save swiper

一、把准备好的swiper文件放在的static下。如图：

二、在src文件夹下components文件下建立swiper.vue（名字可以随便起）

在我们刚刚建立的swiper.vue文件中写入信息

template中对应 swiper官网中html,如图（Slide1,Slide2,Slide3换成图片）

在script中先把我们准备好的swiper的css和js文件引入进来

然后将他导出，从var mySwiper开始为swiper官网中内容

<script>    import '../../../static/swiper/swiper-3.4.2.min.css'    import Swiper from '../../../static/swiper/swiper-3.4.2.min.js';    export default{        name:"aaa",        comments:{Swiper},        mounted(){            this.$nextTick(() =>{                  var mySwiper = new Swiper ('.swiper-container', {                    // direction: 'vertical',                    loop: true,                    autoplay:1000,                                        // 如果需要分页器                    pagination: '.swiper-pagination',                                        // 如果需要前进后退按钮                    nextButton: '.swiper-button-next',                    prevButton: '.swiper-button-prev',                                        // 如果需要滚动条                    // scrollbar: '.swiper-scrollbar',                                        // 以下看个人需要加或者不加                    autoplayDisableOnInteraction : false,   //触碰，拖动，点击后继续轮播                    paginationClickable :true,  //关联点                                    })                  // 以下看个人需要加或者不加,效果为鼠标经过轮播停止,划出继续                $('.swiper-container').mouseover(function(){                    mySwiper.stopAutoplay();                })                $('.swiper-container').mouseout(function(){                    mySwiper.startAutoplay();                })            })        }    }</script>

style中设置scoped(仅用于本页面)和你所需轮播图的大小

<style scoped>    .swiper-container {        width: 790px;        height: 340px;    }</style>

在components中建立index.vue（名字随便起）用来展示轮播图

在刚在建立index.vue的文件夹中的script中引入swiper

<script>    import swiper from "./swiper"    export default{        components:{            swiper        }    }</script>

template中

<template>  <div id="aaa">      <swiper/>  </div></template>

三（此部分也可以在Vue项目步骤中查看）

 src文件夹下的App.vue中：

script中:

把他自带的注释掉（或者删掉）

引入刚才我们建立的index.vue文件并导出

template中引用模块

把他id为app中自带的注释掉（或者删掉）

<index/>

<template>  <div id="app">    <index/>  </div></template><script>import index from "./components/index"  export default {    name: 'app',    components:{      index    }  }</script>

src下main.js中把路由链接的两句话注释掉

import routerfrom'./router' 和 new Vue下的router,这两句话需要注释

运行项目就可以看到效果啦