輪播圖效果

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

一、新建home.vue

1、上篇我們?yōu)榱吮阌谡故?，把頭部my-header組件放在了App.vue頁面，現(xiàn)在我們刪掉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，初始樣子為這樣；