给我一个element ui 使用vue layout布局的代码 给出文件夹及每个文件的代码

好的，以下是一个使用 Element UI 的 Vue 布局布置代码示例，包括文件夹和每个文件的代码：

- src/
  - components/
    - Layout/
      - Header.vue
      - Footer.vue
      - Sider.vue
      - Content.vue
      - Index.vue

Header.vue

<template>
  <header class="header">
    <el-row>
      <el-col :span="8">
        <div class="logo">
          网站 Logo
        </div>
      </el-col>
      <el-col :span="16">
        <nav class="nav">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </nav>
      </el-col>
    </el-row>
  </header>
</template>

<style>
.header {
  background-color: #409EFF;
  color: #fff;
  padding: 10px 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav ul {
  list-style: none;
  text-align: right;
}

.nav li {
  display: inline-block;
  margin-left: 20px;
}

.nav li:first-child {
  margin-left: 0;
}
</style>

Footer.vue

<template>
  <footer class="footer">
    版权信息
  </footer>
</template>

<style>
.footer {
  background-color: #f5f5f5;
  color: #333;
  padding: 10px 20px;
}
</style>

Sider.vue

<template>
  <el-aside class="sider">
    侧边栏内容
  </el-aside>
</template>

<style>
.sider {
  background-color: #f5f5f5;
  padding: 10px 20px;
}
</style>

Content.vue

<template>
  <el-main class="content">
    <slot></slot>
  </el-main>
</template>

<style>
.content {
  padding: 10px 20px;
}
</style>

Index.vue

<template>
  <div class="layout">
    <Header></Header>
    <el-row>
      <el-col :span="6">
        <Sider></Sider>
      </el-col>
      <el-col :span="18">
        <Content>
          <!-- 内容区域的组件 -->
        </Content>
      </el-col>
    </el-row>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from './Header.vue'
import Footer from './Footer.vue'
import Sider from './Sider.vue'
import Content from './Content.vue'

export default {
  name: 'Layout',
  components: {
    Header,
    Footer,
    Sider,
    Content
  }
}
</script>

<style>
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-row {
  margin: 20px 0;
}
</style>

注意：这里的代码只是一个示例，实际使用中可能需要根据具体需求进行修改。同时，这里的 Element UI 组件只是示例，实际使用中可以根据需要选择其他 UI 组件库。