slider-show

vue轮播图组件

Usage no npm install needed!

<script type="module">
  import sliderShow from 'https://cdn.skypack.dev/slider-show';
</script>

README

vue-sliders

vue轮播图组件

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

npm login

npm publish

注意以下文件配置: 修改package.json 修改webpack.config.js 修改.gitignore 文件 修改index.html

实例

首先在项目的入口文件(main.js)中引入

import SliderShow from 'slider-show'
Vue.use(SliderShow)

然后使用该组件

 <slider-show :slides="slides" :inv="invTime" class="slider-show"/>
  data() {
    return {
      invTime: 2000,
      slides: [
        {
          src: require('../../assets/hero/01.jpg'),
          title: '测试测试测试1',
          href: 'detail/analysis'
        },
        {
          src: require('../../assets/hero/02.jpg'),
          title: '测试测试测试2',
          href: 'detail/count'
        }
      ]
    }
  }

关于vue封装插件并发布到npm上的步骤可参考这位朋友的微博vue封装插件并发布到npm上

For detailed explanation on how things work, consult the docs for vue-loader.