vue-awesome-swiper和swiper 在vue-cli中使用

**/*1.在组件方式引用*/**

 import 'swiper/dist/css/swiper.css'这里注意具体看使用的版本是否需要引入样式，以及具体位置。
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
    components: {
      swiper,
      swiperSlide
    }

【注】：vue-awesome-swiper@3.1.4使用小写的swiper和swiperSlide ；而vue-awesome-swiper@4.1.1则需要使用大写的Swiper和SwiperSlide

<!-- html轮播图 -->
<div class="swiper" >
	<swiper class="swiper-container" :options="swiperOption">
		<swiper-slide v-for="(item,index) in slideList" :key="index">
			<a href=""><img :src="item.img" alt=""></a>
		</swiper-slide>
		<div class="swiper-pagination" slot="pagination"></div>
		<div class="swiper-button-prev" slot="button-prev"></div>
		<div class="swiper-button-next" slot="button-next"></div>
	</swiper>
</div>

//js data轮播图 内容
import {
		swiper,
		swiperSlide
	} from 'vue-awesome-swiper';
	import 'swiper/css/swiper.css';
	//注：swiper版本为^5.4.5 则用此上的css  》=6的要用另外一个样式

	export default {
		name: 'swiper',
		components: {
			swiper,
			swiperSlide
		},
		data: function() {
			return {
				slideList: [{
						id: '42',
						img: 'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00580-4096.jpg'
					},
					{
						id: '45',
						img: 'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00580-4096.jpg'
					},
					{
						id: '46',
						img: 'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00580-4096.jpg'
					}
				],
				swiperOption: {	
					autoplay: {
						delay: 3000,
						stopOnLastSlide: false,
						disableOnInteraction: true,
					},
					loop: true, // 循环
					// directionType: "horizontal", // 方向
					
					pagination: { // 分页器
						el: '.swiper-pagination',
						clickable: true
					},
					navigation: {
					  nextEl: '.swiper-button-next',
					  prevEl: '.swiper-button-prev'
					}
				},			
				

		}
	},
}