nuxt使用vue-awesome-swiper的配置教程

本文记叙关于swiper框架有很多功能不能正常使用的情况以及解决办法 和使用版本关系不大，还是尽量使用最新框架版本

#简单介绍下步骤

虽然github上有 点击进入(github.com/surmon-chin…)

##安装

npm install swiper vue-awesome-swiper --save

# or
yarn add swiper vue-awesome-swiper

##nuxt plugin相关 ###方式一，全局配置

此配置为全局配置，适合页面比较少的项目，然后按照文档的demo直接使用就行，在vue文件也不需要import

#####创建plugin文件 命名无所谓，

import Vue from 'vue'

import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/core'

import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

// Swiper modules
SwiperClass.use([Pagination, Mousewheel, Autoplay])

// class.use必须要引用这些组件，不然只能用最基础的功能，并不能用自带的标识器，和滚动效果

// Global use
Vue.use(getAwesomeSwiper(SwiperClass))

#####配置plugin 打开nuxt.config swiper=上一个步骤文件名

plugins: [
    { src: '@/plugins/swiper', ssr: false }
  ],

#####配置css

  css: [
    'swiper/swiper-bundle.css'
  ],

###方式二，局部配置

适合页面比较多的项目，需要控制局部资源

script代码

import { Swiper as SwiperClass, Pagination, Autoplay } from 'swiper/core'

import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

import 'swiper/swiper-bundle.css'

// Swiper modules
SwiperClass.use([Pagination, Autoplay])
// 模块引入和之前一样的没什么好说的
const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass)
// 导出组件
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperOptions: { // swiperOptions对应template里面的swiper options属性
        pagination: { // 添加指示器
          el: '.swiper-pagination'
        },
        loop: true, //循环
        autoplay: true, //自动滚动
        on: { //事件响应
          click () {
            console.log('被点击了')
          }
        }
      }
    }
  }
}

template代码

<!--    swiperOptions 和文档里 配置属性结构一样 -->
<swiper :options="swiperOptions">
      <swiper-slide class="h-20 text-center font-bold">
        Slide 1
      </swiper-slide>
      <swiper-slide class="h-20 text-center font-bold">
        Slide 2
      </swiper-slide>
      <swiper-slide class="h-20 text-center font-bold">
        Slide 3
      </swiper-slide>
      <div slot="pagination" class="swiper-pagination" />
</swiper>