vue3布局

Vue3 的布局方式与 Vue2 有所不同，主要是因为 Vue3 中引入了 Composition API，可以通过自定义组合函数来实现布局。

以下是一个简单的示例，使用 Vue3 的 Composition API 实现一个简单的两栏布局：

<template>
  <div class="container">
    <div class="left-column" :style="{ width: leftWidth + 'px' }">
      <slot name="left"></slot>
    </div>
    <div class="right-column" :style="{ width: rightWidth + 'px' }">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const leftWidth = ref(200);
    const rightWidth = ref(400);

    return {
      leftWidth,
      rightWidth,
    };
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: row;
}

.left-column {
  flex: auto;
}

.right-column {
  flex: auto;
}
</style>

在上面的代码中，我们使用了 Vue3 的 `ref` 函数来定义了 `leftWidth` 和 `rightWidth` 两个响应式变量，然后在模板中使用 `:style` 绑定样式来设置左右两个栏目的宽度。

在 CSS 样式中，我们使用了 `display: flex` 来定义父容器为 Flex 布局，然后使用 `flex: auto` 来让左右两个栏目自动占据剩余的空间。

最后，我们使用了 `<slot>` 来插入左右两个栏目的内容，并使用 `name` 属性来指定插入的位置。

以上是一个简单的 Vue3 布局示例，你可以根据自己的需求进行调整。