Nuxt使用vue-awesome-swiper的正确姿势

近日在开发Nuxt项目的时候，发现nuxt在使用vue-awesome-swiper插件时，总是因为出现各种报错而无法正常使用，加上网上搜到的所谓解决方法都解决不了——要么css路径错误，要么轮播图能显示却卡住根本不能用等等，令人相当无奈。（而且搜到的内容大部分都是复制粘贴别人的，千篇一律又无法解决问题，这种行为真该让人唾弃）。

经过本人总结，总算找到了正确的在Nuxt项目里正确使用vue-awesome-swiper的方法。

首先，安装vue-awesome-swiper：

//只要安装这一个插件就可以了，不需要再安装什么别的swiper等插件。（注意版本号，别的版本可能出现css地址错误）
cnpm i [email protected] -S

第二步，在plugins文件夹下新建js文件，或者在原本就有的js文件里记载vue-awesome-swiper。

例如我创建的文件就是swiper.js，代码如下：

import VueAwesomeSwiper from 'vue-awesome-swiper'

//加载swiper
Vue.use(VueAwesomeSwiper)

之后，在nuxt.config.js文件里配置好css，以及申明加载vue-awesome-swiper的js文件。

代码如下：

  css: [
    'swiper/dist/css/swiper.css'
  ],
  plugins: [
    {src: '~/plugins/swiper.js', ssr: false},        //swiper.js
  ]

到这里就已经可以在各页面里使用了。
代码如下：

//html代码

  
    
    
    

    

    

  


//js代码 -- swiperOptions
swiperOptions: {
  spaceBetween: 30,
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  autoplay: {
    delay: 5000,
  }
},

//swiperList代码
swiperList: [
  {
    imgUrl: require('~/assets/img/swiper1.jpg'),
  },
  {
    imgUrl: require('~/assets/img/swiper2.jpg'),
  },
  { 
    imgUrl: require('~/assets/img/swiper3.jpg'),
  }
]

//scss代码