Vue的邊框布局（border layout）是一種基于DIV布局的技術(shù)，用于將頁面分為不同的區(qū)域，比如頭部、側(cè)邊欄、主體和底部。這樣可以更好地組織頁面結(jié)構(gòu)，讓頁面更加美觀、易于閱讀和使用。

<div id="app">
<div class="header"></div>
<div class="sidebar"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
<style>
#app{
display:flex;
flex-direction:column;
height:100vh;
width:100%;
}
.header {
height: 60px;
background-color: blue;
}
.sidebar {
width: 250px;
background-color: yellow;
flex-shrink: 0;
}
.main {
flex-grow: 1;
background-color: grey;
}
.footer {
height: 50px;
background-color: green;
}
</style>

在上面的代碼中，我們使用了flex布局。具體來說，我們將父容器id為“app”的高度設(shè)置為100vh（視口高度），寬度設(shè)置為100%。然后，我們將其子元素排列為縱向排列（flex-direction:column）。這樣就使得整個(gè)頁面分為以下四個(gè)區(qū)域：

1. 頭部（class="header"）: 高度為60px，背景色為藍(lán)色；

2. 側(cè)邊欄（class="sidebar"）: 寬度為250px，背景色為黃色；

3. 主體（class="main"）: 通過flex-grow屬性占據(jù)剩余的寬度和高度，背景色為灰色；

4. 底部（class="footer"）: 高度為50px，背景色為綠色。

需要注意的是，我們?cè)趥?cè)邊欄中使用了flex-shrink:0，這樣就避免了在窗口縮小的情況下側(cè)邊欄的溢出。