轮播图效果
屏幕快照 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，初始样子为这样；
