Vue项目-2首页开发（轮播图）

1 轮播图Vue-Awesome-Swiper

https://github.com/surmon-china/vue-awesome-swiper

按照文档安装swiper插件（按需安装版本），然后在项目文件main.js中按文档引用，期间import 'swiper/dist/css/swiper.css'时因为版本问题可能会报错，需要import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'把引用目录写全（因为新版本node_modules目录中会多出一个不受版本限制的swiper同名文件）。

新建swiper.vue组件，然后按

<swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>