vue-awesome-swiper实现组件化swiper

vue-awesome-swiper

在vue项目中可以使用vue-awesome-swiper来创建swiper组件。

github地址

案例：vue轮播图

• 安装vue-awesome-swiper插件，npm i vue-awesome-swiper ，安装完后package.json中有了vue-awesome-swiper

"dependencies": {
   
    "vue": "^2.5.2",
    "vue-awesome-swiper": "^3.1.3"
}

• 在main.js中引用。

import Vue from 'vue'
import App from './App'


import vueSwiper from 'vue-awesome-swiper'    //引入vue-awesome-swiper
import 'swiper/dist/css/swiper.css'    //引入样式

Vue.config.productionTip = false

Vue.use(vueSwiper)    // 使用插件


/* eslint-disable no-new */
new Vue({
   
  el: '#app',
  components: {
    App },
  template: '<App/>'
})

• swiper的基本结构为：

 <swiper>
        <swiper-slide class="swiper-slide"></swiper-slide>
 </swiper>

• 在App.vue中实现：

<template>
  <div id="app">
    <div>
      <swiper>
        <swiper-slide class="swiper-slide" v-for="item in slide" :key="item">
          我是第{
   {
   item}}个轮播图
        <