vue中引用轮播图组件

这几天看了vue引用外部组件的知识，来记录一下。
1、首先是vue的组件库（官方的vue组件库地址）： https://github.com/vuejs/awesome-vue
2、查找自己需要的组件：可以Ctrl+f 来快速搜索这些组件。
3、根据组件的使用指南进行引用（以引用轮播图实例）：
1）npm 全局安装组件：npm install -S vue-carousel
2） 引用该组件（有两种方式）：
a、全局引用：在main.js中引用。


import Vue from 'vue';
import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel);
此时在该vue项目中都可以使用该组件。
b、在当前组件中引用：

import { Carousel, Slide } from 'vue-carousel';export default {  ...  components: {    Carousel,    Slide  }  ...};

此时只能在该组件中使用。
4、在html中使用：

<carousel>    <slide>     轮播的内容。    </slide>    <slide>      Slide 2 Content    </slide>  </carousel>

5、相关参数的使用（都添加到 carousel 标签内。）：

<carousel class="index-carousel" :autoplay="true" :minSwipeDistance="40" :scrollPerPage="true" :speed="500" :perPage="1" :paginationPadding="10" :paginationSize="10" :loop="true" @param="right">      </carousel>

其中轮播的宽度由carousel的父节点宽度来决定。
相关api的查询地址：
https://github.com/SSENSE/vue-carousel/blob/master/docs/source/api/index.md