12.轮播图组件

轮播图效果

屏幕快照 2019-05-09 上午2.01.40.png

一、新建home.vue

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

Home.vue

<template>
    <div class="home">
      <my-header></my-header>
      <my-header></my-header>
    </div>
</template>

<script>
    import MyHeader from "../components/myHeader";
    export default {
        name: "home",
        components: {
          MyHeader
        },
      data(){
          return {
            msg:"hello vue"
          };
      },
      mounted() {
      },
      methods:{}

    }
</script>

<style lang="less" scoped>
  // 这样引入会报错
  // @import '@/assets/styles/variables.less';
  // 需要加一个波浪符
  //@import "~@/assets/styles/variables.less";
  // 可以使用相对路径
  //@import "../assets/styles/variables.less";
  // 在webapck.base.conf.js中的alias中配置路径
  @import "~styles/variables.less";
  .home {
    //background: @bgColor;
  }

</style>

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

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../view/home'

Vue.use(Router)

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

二、新建轮播图组件

1、我们命名为carousel，初始样子为这样；