引入swiper

assets/scss/main.scss

@@ -5,6 +5,7 @@
 @import './reset.scss';
 @import './cus-client/cus-elementui.scss';
 @import './cus-client/cus-client-page.scss';
+@import "../../node_modules/swiper/swiper.min.css";
 
 
 
@@ -15,4 +16,4 @@ body {
     -moz-osx-font-smoothing: grayscale;
     color: #2C3E50;
 }
-@include setClientPage();//网站页面样式
+@include setClientPage();//网站页面样式

components/swiper.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="swiper-page">
+      <div v-swiper:mySwiper="swiperOption" class="swiper-container">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide" v-for="(item, idx) in swiperData" :key="idx">
+            <img :src="item.imgUrl" />
+          </div>
+        </div>
+        <div class="swiper-pagination swiper-pagination-style"></div>
+      </div>
+    </div>
+</template>
+<script>
+  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
+  Swiper.use([Navigation, Pagination,Autoplay]);
+  export default {
+    data() {
+      return {
+        swiperData: [
+          { imgUrl: require(`~/static/images/client/index/index-products-kaoshi.png`)},
+          { imgUrl: require(`~/static/images/client/index/index-products-peixun.png`) },
+          { imgUrl: require(`~/static/images/client/index/index-products-kejian.png`) },
+        ],
+        swiperOption: {
+          pagination: {
+            el: '.swiper-pagination',
+            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
+            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
+            clickable: true, // 点击当前滑块切换到对应的轮播图片
+          },
+          autoplay: {
+            delay: 2000,
+          },
+          paginationClickable: true,
+          speed: 800,
+          loop: true,
+          observer: true,
+          observeParents: true,
+          autoplayDisableOnInteraction: false,
+        },
+      }
+    },
+  }
+</script>
+
+<style lang="scss">
+  .swiper-page {
+    position: relative;
+    .swiper-slide {
+      width: 760px;
+      height: 440px;
+      // box-shadow: 0 0 30px 3px rgba(77, 97, 140, 0.4);
+      img {
+        width: 760px;
+        height: 440px;
+      }
+    }
+    .swiper-pagination-style {
+      position: absolute;
+      left: 60px;
+      bottom: 39px;
+      width: 300px;
+      .my-bullet-swiper {
+        display: inline-block;
+        width: 46px;
+        height: 6px;
+        background: #9b9bb6;
+        margin-right: 14px;
+      }
+      .my-bullet-active-swiper {
+        background: #ffd18e;
+      }
+    }
+  }
+</style>
+
+<!--
+<SwiperCmp :list="banners" :isPagination="true" :className="'swiperClass'" :paginationType="bullets"/>
+import SwiperCmp from  '../components/swiper.vue'
+components:{SwiperCmp},
+-->

nuxt.config.js

@@ -54,14 +54,14 @@ export default {
     'element-ui/lib/theme-chalk/index.css',
     // 移动端栅格
     // 'element-ui/lib/theme-chalk/display.css',
-    '@/assets/scss/main.scss'
+    '@/assets/scss/main.scss',
   ],
   /*
   ** Plugins to load before mounting the App
   ** https://nuxtjs.org/guide/plugins
   */
   plugins:      [
-    '@/plugins/element-ui', '~/plugins/axios.http', {src:'~plugins/loadsh.js',ssr: false},{src:'~plugins/consult.js',ssr: false},
+    '@/plugins/element-ui', '~/plugins/axios.http', {src:'~plugins/loadsh.js',ssr: false},{src:'~plugins/consult.js',ssr: false},{src:'@/plugins/vue-swiper.js',ssr: false},
   ],
   /*
   ** Auto import components

package.json

@@ -17,7 +17,9 @@
     "nuxt": "^2.14.0",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^9.0.3",
-    "style-loader": "^1.2.1"
+    "style-loader": "^1.2.1",
+    "swiper": "^6.8.0",
+    "vue-awesome-swiper": "^4.1.1"
   },
   "devDependencies": {
     "axios": "^0.19.2"

plugins/vue-swiper.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueAwesomeSwiper from 'vue-awesome-swiper'
+
+Vue.use(VueAwesomeSwiper)