vue-awsome-swiper°²×°ºÍcssÒýÈëÎÊÌâ

1¡¢°²×°

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

2¡¢cssÒýÈëÎÊÌâ（½øÈëpackage.jsonÖÐÏȲ鿴swiperµÄ°æ±¾ºÅ）

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3¡¢×¢²á×é¼þ

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
// If you use Swiper 6.0.0 or higher
import 'swiper/swiper-bundle.css'

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

4¡¢cdn·½Ê½ÒýÈë

<link rel="stylesheet" href="path/to/swiper.css"/>
<script type="text/javascript" src="path/to/swiper.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script>
<script type="text/javascript">
  Vue.use(window.VueAwesomeSwiper)
</script>