nuxt.js中使用vue-awesome-swiper步骤详解

诸位大佬,可否扫下右下方参与下“支付宝”红包活动!小弟万分感谢!

vue-awesome-swiper在前端交互效果中的应用十分广泛,那么我们要如何在nuxt.js中使用该组件呢?

我们先来看看最终效果如图:


本最终效果是将vue-awesome-swiper引入组件中使用,所以比常规直接在页面中应用多了一个步骤,即一共分为五步。

步骤一:安装vue-awesome-swiper插件

npm install swiper vue-awesome-swiper --save
# or
yarn add swiper vue-awesome-swiper

步骤二:在plugins下新建vue-awesome-swiper.js文件

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

步骤三:在nuxt.config.js中配置

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

步骤四:在components中创建一个swiperBanner.vue组件

<template>
<div v-swiper:mySwiper="swiperOption" class="swiperWrap">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="banner in banners">
<img :src="banner.src">
</div>
</div>
<div class="swiper-pagination swiper-pagination-bullets"></div>
</div>
</template>

<script>
export default {
data(){
return{
banners:[
{src:require("../../assets/img/20191022163942.jpg"),link:""},
{src:require("../../assets/img/20191022163942.jpg"),link:""},
],
swiperOption: {
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
dynamicBullets: true
},
on: {
slideChange() {
console.log('onSlideChangeEnd', this);
},
tap() {
console.log('onTap', this);
}
}
}
}
},
}
</script>

<style lang="scss">
.swiperWrap{
.swiper-slide{
img{
width:100%;
height:100%;
}
}
}
</style>

步骤五:组件在页面中的应用

<Banner></Banner>
#
components: {
Banner
},
#
import Banner from '~/components/swiperBanner.vue'

以上便是关于在nuxt.js中使用swipter的完整步骤,事实上在nuxt中所有第三方插件使用步骤和这个方法一致,所以你其余插件也可以完全按照该步骤来安装。