Vue项目中轮播插件 vue-awesome-swiper 的安装与使用

安装

在项目文件下

 npm install vue-awesome-swiper --save

注：如果需要安装其他版本，在vue-awesome-swiper后添加版本号，例如，安装swiper 3 ：

npm install vue-awesome-swiper@2.6.7 --save

引入

全局引入,在main.js下输入下面代码

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

注：一定要引入css，我忘记引入css，可实现轮播的功能，但是轮播的内容的竖排渲染的

使用

Vue.use(VueAwesomeSwiper, /* { default global options } */)

组件中写swiper

<template>
    <!-- swiper 中的内容可以使用数组引入 -->
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
     <!-- 轮播的内容，下方是有7个