1.配置全局样式表

/*解决微信浏览器背景默认灰色问题*/
body,html {
    background: #ffffff
}
/******************************/
/*解决vue组件页面布局body默认边距问题*/
body {
    margin: 0;
    padding: 0;
    border: 0;
}
#app {
    margin-top: 0px;
}

在main.js中引入全局样式表

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入全局样式表
import '@/assets/css/global.css'
//以下是完整引入elementui组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

//使用elementui组件
Vue.use(ElementUI);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2.自定义MyCarousel组件

<template>
  <div class="mycarousel-container">
    <!--巨幕-->
    <el-carousel trigger="click" style="width: 100%">
      <el-carousel-item v-for="(item,index) in carouselItemsList" :key="index"
                        :style="{backgroundImage:'url(' + item.img + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center top', backgroundSize: 'cover'}">
        <div class="jumbotron">
          <div class="bg" style="height:300px">
            <h1>{{ item.title }}</h1>
            <div style="margin: 0px auto; width: 50%;">
              <el-divider style="width: 600px"></el-divider>
            </div>
            <el-button type="success" round plain>开始学习</el-button>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>

export default {
  name: "MyCarousel",
  data() {
    return {
      carouselItemsList: [
        {
          title: 'Java全栈学习线路',
          actionUrl: '#',
          img: 'https://img.simoniu.com/bgcolor_06.jpg',
        },
        {
          title: 'Python自动化学习线路',
          actionUrl: '#',
          img: 'https://img.simoniu.com/bgcolor_05.jpg',
        },
        {
          title: '大数据运维学习线路',
          actionUrl: '#',
          img: 'https://img.simoniu.com/bgcolor_07.jpg',
        }
      ]
    }
  }
}
</script>

<style scoped>

.mycarousel-container{
   margin-top: 60px;
}

.jumbotron {
  width: 100%;
  margin: 0px auto;
  text-align: center;
}

.bg h1 {
  padding: 0px;
  margin: 60px;
  font-size: 40pt;
  text-shadow: 2px 2px 2px #999999;
  color: #FFF;
}

.bg h3 {
  padding: 0px;
  margin: 0px;
  font-size: 20pt;
  color: #FFF;
}
</style>

轮播巨幕实现效果：