我需要vue自适应布局代码

好的。

Vue.js 是一个流行的 JavaScript 前端框架，可以帮助开发者更快速、高效地开发 Web 应用。

如果你想要在 Vue.js 中实现自适应布局，你可以使用 CSS 自适应布局方案，比如 Flexbox 和 Grid 布局。

下面是一个使用 Flexbox 实现自适应布局的示例代码：

<template>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</template>

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    flex: 1 1 auto;
  }
</style>

上面的代码定义了一个父容器 `container`，并且设置了 `display: flex` 和 `flex-wrap: wrap`，这样子元素会自动换行，实现自适应布局。同时，给子元素设置了 `flex: 1 1 auto`，表示子元素会自动填满剩余空间。

当然，你也可以使用 Grid 布局来实现自适应布局，示例代码如下：

<template>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</template>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  .item {
    grid-column: span 1;
  }
</style>

上面的代码定义了一个父容器 `container`，并且设置了 `display: grid` 和 `grid-template-columns: repeat(auto-fill, minmax(