布局（vue）

Vue是一款流行的JavaScript框架，以下是一些常见的Vue布局方式：
 
基于CSS框架布局
 
- 使用Bootstrap：引入Bootstrap的CSS和JavaScript文件，利用其网格系统进行布局。如在Vue组件模板中可这样使用：
 
<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-6">左侧内容</div>
      <div class="col-sm-6">右侧内容</div>
    </div>
  </div>
</template>
 
 
- 使用Element UI：它是专门为Vue.js开发的UI框架。在Vue项目中安装并引入Element UI后，可这样布局：
 
<template>
  <el-row>
    <el-col :span="12">左边栏</el-col>
    <el-col :span="12">右边栏</el-col>
  </el-row>
</template>
 
 
基于Flex布局
 
- 基本的水平布局：在Vue组件的模板中，给父元素设置 display: flex ，子元素会自动在水平方向排列。
 
<template>
  <div style="display: flex;">
    <div style="flex: 1;">组件1</div>
    <div style="flex: 1;">组件2</div>
  </div>
</template>
 
 
- 垂直布局：通过设置 flex-direction: column 实现垂直布局。
 
<template>
  <div style="display: flex; flex-direction: column;">
    <div>头部</div>
    <div>内容</div>
    <div>底部</div>
  </div>
</template>
 
 
基于Grid布局
 
- 简单的2x2网格布局：在模板中使用CSS Grid布局，定义一个2x2的网格。
 
<template>
  <div style="display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px;">
    <div>左上角</div>
    <div>右上角</div>
    <div>左下角</div>
    <div>右下角</div>
  </div>
</template>
 
 
- 复杂的响应式布局：根据不同的屏幕尺寸，使用媒体查询来调整网格布局。
 
<template>
  <div class="grid-container">
    <div class="item1">内容1</div>
    <div class="item2">内容2</div>
    <div class="item3">内容3</div>
  </div>
</template>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
}
@media (max-width: 768px) {
 .grid-container {
    grid-template-columns: 1fr;
  }
}
</style>