vue 布局

<template>
  <div id="app">
    <!-- 头部区域 -->
    <header>
      <h1>Vue 布局示例</h1>
    </header>

    <!-- 主体内容区域 -->
    <main>
      <section class="left-sidebar">
        <h2>左侧边栏</h2>
        <p>这里是左侧边栏的内容。</p>
      </section>

      <section class="content-area">
        <h2>主要内容区</h2>
        <p>这里是页面的主要内容。</p>
      </section>

      <section class="right-sidebar">
        <h2>右侧边栏</h2>
        <p>这里是右侧边栏的内容。</p>
      </section>
    </main>

    <!-- 底部区域 -->
    <footer>
      <p>&copy; 2023 Vue 布局示例</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header, footer {
  background-color: #f8f9fa;
  padding: 1rem;
  text-align: center;
}

main {
  display: flex;
  flex: 1;
}

.left-sidebar, .right-sidebar {
  background-color: #e9ecef;
  padding: 1rem;
  width: 20%;
}

.content-area {
  background-color: #fff;
  flex: 1;
  padding: 1rem;
}
</style>

解释说明：

• 模板部分 (<template>)：定义了页面的基本结构，包括头部、主体和底部。主体部分又分为左侧边栏、主要内容区和右侧边栏。
• 脚本部分 (<script>)：定义了一个简单的 Vue 组件 App。
• 样式部分 (<style scoped>)：使用了 CSS Flexbox 来布局页面，确保各个部分按预期排列。scoped 属性确保这些样式只应用于当前组件。

这个示例展示了如何使用 Vue 和 CSS Flexbox 创建一个简单的响应式布局。