vue CLI3.0自己实现一个轮播组件，并设置自定义属性

搭建CLI步奏过程不详细介绍了

主要利用Vue.component()注册全局组件,滑动效果使用了translateX
如下图

让后开始详细介绍如何实现自己的轮播组件

一.新建jv-swiper文件夹
1.1、然后在jv-swiper文件夹新建index.vue ，该vue其实为swiper的外层控制

1.2、然后在jv-swiper文件夹新建swiper-item.vue ，该vue其实为swiper的swiper-item

二、在jv-swiper同级新建jv-index.js用了统一注册组件

/* eslint-disable */
import JvSwiper from './jv-swiper'
import SwiperItem from './jv-swiper/swiper-item.vue'

const JvIndex={
    install:function(Vue){
        // Vue.component()是用来注册全局组件的
       Vue.component("jv-swiper", JvSwiper);
       Vue.component("swiper-item", SwiperItem);
    }  
}
export default JvIndex

三、在mian.js 注册一下

import JvIndex from './components/jv-index'
Vue.use(JvIndex)

四、开始使用啦~

好了大功告成，下面为效果图

总结：

主要利用Vue.component()注册全局组件
使用 this.$refs.swileng.attributes 获取用户设置的参数，不知道各位大佬有没有更好的方式，求介绍
使用this.$refs.swileng.childNodes获取用多少张轮播，不知道各位大佬有没有更好的方式，求介绍
滑动效果使用了translateX 使用 slot 实现用户在组件标签内插入html代码 个人感觉自己写的代码还是有点小乱，还需改进提升