[JavaScript知识库]vue中引入轮播图插件swiperVue2中引入第三方插件vue-awesome-swiper

0 vue-awesome-swiper使用网址：

链接: https://github.com/surmon-china/vue-awesome-swiper/tree/v4.1.1

1 项目创建

vue create vue-project-demo

2 进入项目根目录

cd vue-project-demo

3 安装swiper依赖，需要指定版本，不然可能因为版本问题导致轮播图加载不出来

npm install swiper@6.7.1 vue-awesome-swiper@4.1.1 --save

4 vue-project-demo\src\main.js中导入文件

// main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper)

5 在子组件的.vue文件中的template/div内添加如下代码

<swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
</swiper>

6 该子组件的data(){}函数复制为如下代码

 data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          // Some Swiper option/callback...
        }
      }
    },

7 服务器运行测试

npm run serve

8 运行结果