swiper在Vue项目中的使用教程

**

此文章使用的是swiper7.0以下的版本

**

"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.1.1",

1.插件下载

npm install swiper vue-awesome-swiper --save

2.注册

• 全局注册， 在main.js文件中

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

• 本地注册，在Vue文件的在script中

 import {
    Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
 import 'swiper/css/swiper.css'

export default {
   
  components: {
   
    Swiper,
    SwiperSlide
  },
  directives: {
   
    swiper: directive
  }
}

3.代码块

在HTML中