實現伸縮框是Web開發中一個經典的問題，使得用戶可以拖拽邊界來控制大小。在Vue中，可以通過以下步驟輕松實現：

<template>
<div class="resizable">
<div class="left"></div>
<div class="right"></div>
</div>
</template>
<style>
.resizable {
display: flex;
height: 200px;
}
.left {
flex-grow: 1;
background-color: red;
}
.right {
flex-basis: 100px;
background-color: blue;
}
</style>

這個代碼展示了一個簡單的實現方式。我們首先定義一個div標簽，根據需要添加其他的子標簽。在這個例子中，我們添加了兩個div標簽，分別表示整個伸縮框的左側部分和右側部分。兩個子標簽的類名分別為left和right。

接下來，我們需要在CSS部分設置彈性盒子模型（Flexbox）屬性。因為彈性盒子可通過調整的布局，使得不同尺寸的內容在同一塊容器中自適應布局（flexbox 流），能夠極大優化用戶體驗，同時也可以很方便的完成我們實現伸縮框的任務。我們將父標簽的類名設置為resizable并設置如下樣式：

.resizable {
display: flex;
height: 200px;
}
.left {
flex-grow: 1;
background-color: red;
}
.right {
flex-basis: 100px;
background-color: blue;
}

其中，我們設置了resizable的display屬性為flex，這表示我們使用flexbox模型布局。我們還設置了resizable的高度為200px，這可以按需調整。在子標簽left中，我們設置了flex-grow: 1屬性，這是讓左側部分自動填充所有可用的空間，實現了自適應布局的效果。在子標簽right中，我們設置了flex-basis屬性為100px，這是設置了右側側部分100px的寬度。這樣，左側部分和右側部分就會根據設定的大小自動調整布局。

上面的代碼只是一個最基本的實現方式，如果需要更加復雜的布局，可以設置更多的彈性盒子屬性。例如，可以使用flex-direction屬性設置主軸的方向，使用justify-content屬性設置項目在主軸上的對齊方式，使用align-items屬性設置項目在交叉軸上的對齊方式等等。