8.轮播图组件及vue-awesome-swiper的引入(手把
一、新建home.vue
1、上篇我们为了便于展示,把头部my-header
组件放在了App.vue
页面,现在我们删掉App.vue
里面的头部组件然后我们在view文件里面新建一个home.vue
页面,然后把头部组件和今天要讲的轮播图组件都放在home.vue
页面。

2、在router
》 index.js
中配置路由,将home.vue
组件映射到根路由/
上

ok,关于对上篇的修改完成。
二、新建轮播图组件
1、我们命名为carousel,初始样子为这样;

2、然后去home.vue
里面引入这个轮播图组件,引入的方式跟头部组件一样,不多阐述。
三、引入swiper实现轮播图效果
1、关于vue-awesome-swiper
vue-awesome-swiper是我个人比较倾向的一个轮播图开源组件,GitHub地址在这里:https://github.com/surmon-china/vue-awesome-swiper,官网介绍这里:https://surmon-china.github.io/vue-awesome-swiper/;官网从安装到使用都介绍的很详细了,大家可以去看看;ok,我们从官网选取一种轮播图效果作为我们项目的轮播图,就这个了

2、用npm安装vue-awesome-swiper
① 在命令行中输入安装依赖
$ npm install vue-awesome-swiper --save

② 然后我们去package.json中看看是否存在

3、怎么用
ok,现在安装完成了,我们怎么在项目中使用?GitHub上说的很明白了,我们一步步来。
(1)GitHub上提供了多种使用方式,我们要在vue项目中要用到的主要是选全部引入还是组件中引入,这里我们选第二种:

(2)我们按照它的来在项目中引入:

(3)html的结构也按照它提供的来复制粘贴一下到carousel.vue
中:

我们的template
结构把右箭头、左箭头什么的注释掉

script中的参数添加分页参数和自动轮播两个参数,具体参数注释上也上说的很清楚了,跟swiper官方api参数一样(http://www.swiper.com.cn/api/index2.html)

四、最后我们去浏览器看看效果

然后修改一下样式变成这样:

(ps:关于Luxury主题的图片实在是太难找了,考虑换个主题)
参考学习
https://github.com/surmon-china/vue-awesome-swiper
http://www.swiper.com.cn/api/index2.html