普通vue3项目：

 

win10的小伙伴我们可以先在桌面（或者文件夹里）按住Shift之后点击右键打开Powershell窗，不是的自己打开cmd，效果是一样的。

 

之后在命令行里面输入vue create vue3

 

接着选择创建默认的vue3项目

 

接着用VSCode编辑器打开项目，在命令输入npm i swiper，成功后package.json文件中会标上

 

接着我在官网找了个功能比较全的代码作为例子，如下：

 

<template>

 

  <swiper

 

    :modules="modules"

 

    :slides-per-view="3"

 

    :space-between="50"

 

    navigation

 

    :pagination="{ clickable: true }"

 

    :scrollbar="{ draggable: true }"

 

    @swiper="onSwiper"

 

    @slideChange="onSlideChange"

 

  >

 

    <swiper-slide>Slide 1</swiper-slide>

 

    <swiper-slide>Slide 2</swiper-slide>

 

    <swiper-slide>Slide 3</swiper-slide>

 

    …

 

  </swiper>

 

</template>

 

<script>

 

  // import Swiper core and required modules

 

  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

 

  // Import Swiper Vue.js components

 

  import { Swiper, SwiperSlide } from 'swiper/vue';

 

  // Import Swiper styles

 

  import 'swiper/css';

 

  import 'swiper/css/navigation';

 

  import 'swiper/css/pagination';

 

  import 'swiper/css/scrollbar';

 

  // Import Swiper styles

 

  export default {

 

    components: {

 

      Swiper,

 

      SwiperSlide,

 

    },

 

    setup（） {

 

      const onSwiper = （swiper） => {

 

        console.log（swiper）;

 

      };

 

      const onSlideChange = （） => {

 

        console.log（'slide change'）;

 

      };

 

      return {

 

        onSwiper,

 

        onSlideChange,

 

        modules: [Navigation, Pagination, Scrollbar, A11y],

 

      };

 

    },

 

  };

 

</script>