nuxt swiper vue

nuxt swiper vue

前提：外包写了个官网，纯html。无seo/不支持一套代码多个语言等，所以重构
开始进坑：用nuxt改写
swiper 巨巨巨多（跳坑请看正文第2点或爬坑）

1.nuxt不支持swiper，经常弹出。改用2之后少弹

2.改用vue-awesome-swiper，非常非常不顺利！！！！！百分之八十出现的bug全是这个的错（当然可能是我菜）

（1）老老实实下载swiper和vue-awesome-swiper不行，会遭遇样式消失等待各种版本问题，现在就是遇到比较稳定的就是vue-awesome-swiper v3.1.3 +swiper4.官网文档写有

"swiper": "^4.3.5","vue-awesome-swiper": "^3.1.3",

在plugin 目录下的swiper.js，

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper)

在config.js

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

（2）SSR又是巨坑，在config里配了不能服务器渲染，也就是说nuxt不用generate打包成html，改用服务器渲染的时候，这个swiper就失效了！！

– 前期用generate打包，没有问题，即使出现window is no defined 这种，加个标签就行了
– 改用服务器渲染，swiper失效，百度了很多种方法，不全。如果对源代码里渲染出元素没有要求，可以使用或标签包裹swiper

爬坑：官网明确指出，如果需要seo，需要用到v-swiper这个指令

局部引入

 import Vue from 'vue'import "swiper/dist/css/swiper.css"if(process.browser){const VueAwesomeSwiper=require('vue-awesome-swiper/dist/ssr')Vue.use(VueAwesomeSwiper)}

data 配置swiperOption

ps：如果碰到父组件嵌套多个子组件时，swiper依旧有可能失效！！所以如果失效部分可以使用或标签包裹swiper，只能有所取舍了