vue实现布局

Vue 实现布局的方法

Vue.js 提供了多种方式实现页面布局，包括基于组件的布局、使用 CSS 框架或自定义样式。以下是几种常见的方法：

使用组件化布局

将页面拆分为多个组件（如头部、侧边栏、主内容、底部），通过 Vue 的组件系统组合。

<template>
  <div class="app">
    <Header />
    <div class="main">
      <Sidebar />
      <Content />
    </div>
    <Footer />
  </div>
</template>

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

export default {
  components: { Header, Sidebar, Content, Footer }
}
</script>

<style>
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main {
  display: flex;
  flex: 1;
}
</style>

基于 CSS Flexbox/Grid 的布局

利用现代 CSS 技术实现响应式布局，无需额外依赖。

<template>
  <div class="grid-container">
    <header class="header">Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="content">Main Content</main>
    <footer class="footer">Footer</footer>
  </div>
</template>

<style>
.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
</style>

使用 UI 框架（如 Element UI、Vuetify）

借助成熟的 UI 框架快速实现专业布局。

<template>
  <el-container style="height: 100vh">
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Sidebar</el-aside>
      <el-main>Main Content</el-main>
    </el-container>
    <el-footer>Footer</el-footer>
  </el-container>
</template>

<script>
import { ElContainer, ElHeader, ElAside, ElMain, ElFooter } from 'element-plus'

export default {
  components: {
    ElContainer, ElHeader, ElAside, ElMain, ElFooter
  }
}
</script>

动态布局切换

通过 Vue 的响应式特性实现布局动态变化。

<template>
  <div :class="['layout', { 'vertical': isVertical }]">
    <div class="header">Header</div>
    <div class="body">
      <div class="sidebar" v-if="!isVertical">Sidebar</div>
      <div class="content">Content</div>
    </div>
  </div>
  <button @click="toggleLayout">Toggle Layout</button>
</template>

<script>
export default {
  data() {
    return {
      isVertical: false
    }
  },
  methods: {
    toggleLayout() {
      this.isVertical = !this.isVertical
    }
  }
}
</script>

<style>
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.layout.vertical .body {
  flex-direction: column;
}
.body {
  display: flex;
  flex: 1;
}
.sidebar {
  width: 200px;
}
.content {
  flex: 1;
}
</style>

路由集成布局

结合 Vue Router 实现不同路由的专属布局。

// router.js
const routes = [
  {
    path: '/admin',
    component: AdminLayout,
    children: [
      { path: 'dashboard', component: Dashboard }
    ]
  },
  {
    path: '/',
    component: DefaultLayout,
    children: [
      { path: '', component: Home }
    ]
  }
]

每种方法适用于不同场景，组件化适合复杂应用，CSS 方案提供最大灵活性，UI 框架加速开发，动态布局增强用户体验，路由集成便于管理多布局系统。