vue+element编写一个门户网站首页

这里提供一个简单的vue+element门户网站首页示例代码，仅供参考：

<template>
  <div class="home">
    <el-row>
      <el-col :span="24">
        <h1>欢迎来到门户网站首页</h1>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <el-carousel>
          <el-carousel-item v-for="(item, index) in carouselData" :key="index">
            <img :src="item.imgUrl" alt="">
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="8">
        <el-card>
          <h4 slot="header">热门文章</h4>
          <div v-for="(item, index) in hotArticles" :key="index">
            <h5>{{ item.title }}</h5>
            <p>{{ item.summary }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <el-card>
          <h4 slot="header">最新文章</h4>
          <div v-for="(item, index) in newArticles" :key="index">
            <h5>{{ item.title }}</h5>
            <p>{{ item.summary }}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <h4 slot="header">友情链接</h4>
          <div v-for="(item, index) in friendLinks" :key="index">
            <a :href="item.link">{{ item.name }}</a>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carouselData: [
        {
          imgUrl: 'https://picsum.photos/600/300?random=1'
        },
        {
          imgUrl: 'https://picsum.photos/600/300?random=2'
        },
        {
          imgUrl: 'https://picsum.photos/600/300?random=3'
        }
      ],
      hotArticles: [
        {
          title: '文章标题1',
          summary: '文章摘要1'
        },
        {
          title: '文章标题2',
          summary: '文章摘要2'
        },
        {
          title: '文章标题3',
          summary: '文章摘要3'
        },
        {
          title: '文章标题4',
          summary: '文章摘要4'
        }
      ],
      newArticles: [
        {
          title: '文章标题1',
          summary: '文章摘要1'
        },
        {
          title: '文章标题2',
          summary: '文章摘要2'
        },
        {
          title: '文章标题3',
          summary: '文章摘要3'
        },
        {
          title: '文章标题4',
          summary: '文章摘要4'
        }
      ],
      friendLinks: [
        {
          name: '友情链接1',
          link: 'https://www.baidu.com'
        },
        {
          name: '友情链接2',
          link: 'https://www.google.com'
        },
        {
          name: '友情链接3',
          link: 'https://www.qq.com'
        }
      ]
    }
  }
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
</style>

该示例代码使用了element-ui的组件，包括`el-row`、`el-col`、`el-carousel`、`el-carousel-item`、`el-card`等，通过这些组件实现了网站首页的布局和展示。同时，也使用了vue的数据绑定、循环等功能，在数据和视图之间建立了联系。