nuxt.js使用swiper插件

先装swiper插件npm install --save vue-awesome-swiper

引入第三方插件一般放置到plugins目录下

创建swiper.js

 import Vue from 'vue'
import css from 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
export default () => {
Vue.use(VueAwesomeSwiper,{css})
}

接着在nuxt.config.js的plugins里配置

 plugins: [
    { src: "~/plugins/swiper.js", ssr: false }
  ],

页面上标签这样写

安装的swiper版本为4.1.1，swiper配置如下：

swiperOption: {
       pagination: '.swiper-pagination',
       paginationClickable: true,
       autoplay: 2000,
       speed: 1000,
       loop: true,
       observer: true,
       observeParents: true,
       autoplayDisableOnInteraction: false,
       nextButton: '.swiper-button-next',
       prevButton: '.swiper-button-prev'
     }