使用vue-awesome-swiper实现幻灯片组件开发

vue的swiper组件 https://www.npmjs.com/package/vue-awesome-swiper

 

1、安装 swiper 和 vue-awesome-swiper 插件

cnpm install swiper vue-awesome-swiper --save

（截图里只安装了vue-awesome-swiper，后面我又安装了swiper，大家自己补充下）

 

 

 

 

2、在 components目录下，创建slider目录，导入图片素材，创建index.vue

 

3、创建pages/home/index.vue，引入slider组件

 

4、添加路由 src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from 'pages/home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

 

效果图