企业官网建设流程全解析

Vuetify 三栏 Wireframe 布局模板实战：从示例组件到响应式栅格源码解析

【免费下载链接】vuetify🐉 Vue Component Framework项目地址: https://gitcode.com/gh_mirrors/vu/vuetify

Vuetify 官方文档将一系列开箱即用的页面骨架称为Wireframe（线框模板），它们以最少的代码搭建出符合 Material Design 规范的布局、分层与阴影体系，供开发者在此基础上快速起步并改造成真实应用。本文以packages/docs/src/pages/en/wireframes/three-column.md所对应的Three Column（三栏）模板为对象，逐层拆解其组件结构与关键配置，并结合VGrid栅格、VTabs选项卡等底层源码说明实现原理，帮助你彻底掌握这类模板的阅读方法、复用方式与改造思路。

Wireframe 是什么：three-column 在布局模板体系中的位置

在阅读三栏模板之前，先明确 Wireframe 这一概念在整个项目中的定位。Vuetify 文档在 getting-started/wireframes.md 中说明：这些模板"以一致的方式处理布局（layouts）、分层（layering）和阴影（shadows）"，它们是一个可修改的起点，而非成品页面；其目的是用极小的成本快速搭建应用的 UI 区域骨架。该页面在 nav.json 的导航结构中与 getting-started 系列并列，是官方引导新用户快速上手的入口之一。

three-column.md本身是一个典型的文档入口文件，包含两部分内容：

1. frontmatter 元信息：声明layout: wireframe，并提供title（Three column Wireframe）、keywords（vuetify wireframe、vuetify app、vue app）与description（A three-column wireframe template for Vuetify）三组 SEO/检索元数据；
2. 页面主体：通过<script setup>导入位于@/examples/wireframes/three-column.vue的示例组件，并以自定义标签<three-column />将其挂载到页面上。

其中layout: wireframe指向文档站点的 wireframe.vue 布局，该布局只做两件事：渲染router-view承载页面内容，并在右下角固定一个跳转到对应示例源码的按钮（按钮路径由路由最后一段拼接examples/wireframes/*.vue生成）。由此可见，三栏模板的真正技术主体是three-column.vue组件，下面围绕它展开。

Three Column 模板完整代码与整体结构

three-column.vue 是模板的唯一实现，完整代码如下（未做删减）：

<template> <v-app id="inspire"> <v-app-bar class="px-3" density="compact" flat > <v-avatar class="hidden-md-and-up" color="grey-darken-1" size="32" ></v-avatar> <v-spacer></v-spacer> <v-tabs align-tabs="center" color="grey-darken-2" > <v-tab v-for="link in links" :key="link" :text="link" ></v-tab> </v-tabs> <v-spacer></v-spacer> <v-avatar class="hidden-sm-and-down" color="grey-darken-1" size="32" ></v-avatar> </v-app-bar> <v-main class="bg-grey-lighten-3"> <v-container> <v-row> <v-col cols="12" md="2" > <v-sheet min-height="268" rounded="lg" > <!-- --> </v-sheet> </v-col> <v-col cols="12" md="8" > <v-sheet min-height="70vh" rounded="lg" > <!-- --> </v-sheet> </v-col> <v-col cols="12" md="2" > <v-sheet min-height="268" rounded="lg" > <!-- --> </v-sheet> </v-col> </v-row> </v-container> </v-main> </v-app> </template> <script setup> const links = [ 'Dashboard', 'Messages', 'Profile', 'Updates', ] </script> <script> export default { data: () => ({ links: [ 'Dashboard', 'Messages', 'Profile', 'Updates', ], }), } </script>

整体结构是一棵清晰的组件树：

v-app ├── v-app-bar（顶部应用栏） │ ├── v-avatar（左，仅 < md 显示） │ ├── v-spacer │ ├── v-tabs > v-tab × 4（居中导航） │ ├── v-spacer │ └── v-avatar（右，仅 ≥ sm 显示） └── v-main（内容区，灰底） └── v-container └── v-row ├── v-col md="2"（左栏：v-sheet 占位） ├── v-col md="8"（中栏：v-sheet 主内容占位） └── v-col md="2"（右栏：v-sheet 占位）

从上到下可以拆解为「顶部应用栏」与「内容区三栏栅格」两大模块，下面分别深入。

顶部应用栏：v-app-bar 与 v-tabs 的配合

应用栏承载了模板的全局导航。其关键配置如下：

• class="px-3"：为应用栏内容添加左右 3 单位的内边距（Vuetify spacing 工具类），使头像与选项卡不贴边；
• density="compact"：使用紧凑密度，压缩应用栏高度，适合信息密度较高的后台类界面；
• flat：去掉阴影与 elevation，让应用栏与下方浅灰内容区视觉上更接近、更扁平。

应用栏内部是「左头像 — 间距 — 居中选项卡 — 间距 — 右头像」的对称排布：

• 左右各一个v-avatar，通过响应式显隐类实现移动端/桌面端的差异化展示：左侧头像带hidden-md-and-up（md 及以上断点隐藏），右侧头像带hidden-sm-and-down（sm 及以下断点隐藏）。从源码结构看，这样设计的意图是：小屏时左侧头像代表菜单入口，大屏时右侧头像代表用户入口，避免同屏出现两个头像；
• 两个v-spacer把中间内容推挤到水平居中；
• 中部v-tabs设置align-tabs="center"使选项卡整体居中、color="grey-darken-2"调整文字颜色，内部用v-for="link in links"渲染 4 个v-tab，:text="link"直接以文本形式呈现标签。

align-tabs并非魔法，其底层实现在 VTabs.tsx 中：组件会根据props.alignTabs拼接出v-tabs--align-tabs-${props.alignTabs}这样的类名；对应样式则在 VTabs.sass 中定义，例如.v-tabs--align-tabs-center通过 flex 布局将选项卡组推至容器中央。这也是阅读 Vuetify 源码的通用思路：prop → 类名 → 样式。

值得注意的一个细节：组件同时提供了<script setup>和传统 Options API 的<script>两个块，两者都定义了links数组（Dashboard、Messages、Profile、Updates）。这种双写方式在官方文档示例中很常见，用于兼顾两种书写习惯的读者——在实际项目中任选其一即可，不必同时保留。

内容区三栏栅格：v-row / v-col 的响应式列宽

内容区是模板的核心：一个v-container包裹v-row，内部三个v-col组成典型的三栏布局：

这套写法基于 Vuetify 的 12 列栅格系统：每个断点（base、sm、md、lg、xl、xxl）都可独立指定列宽，未指定的断点自动继承上一档。因此cols="12" md="2"的含义是「小屏时占满整行、从 md 起占 2 列」——三栏在手机上自然堆叠为纵向排列，无需任何媒体查询代码，这正是模板"响应式开箱即用"的体现。

栅格的底层原理可以追溯到 VGrid.sass 中.v-col的 CSS 变量体系。该规则通过--v-col-size、--v-col-size-columns、--v-col-gap-x等变量，配合flex-grow、flex-shrink、flex-basis计算出每一列的实际宽度，其核心公式为：

flex-basis: calc(($size * (100% + $gap)) / $cols - $gap)

随后 VGrid.sass 中的make-grid-columns混入会遍历settings.$grid-columns（默认 12）与各断点 infix，生成诸如.v-col--cols-md-2这类实用类：它们将--v-col-size设为对应数值、--v-col-is-size设为 true，从而让.v-col按指定份数分配宽度。理解了这条链路，就能明白模板中md="2"、md="8"最终是如何落地为真实布局的，也能在需要时通过v-row的columnsprop 或自定义列数做灵活调整。

三个v-col内部各放一个v-sheet作为占位卡片，统一设置rounded="lg"（大圆角）与不同min-height：左右栏 268px，中栏70vh（视口高度的 70%）。v-sheet是 Vuetify 中通用的"纸张"容器，可叠加color、elevation、rounded等视觉属性；模板配合v-main上的bg-grey-lighten-3浅灰背景，使三个白色圆角区块在页面上清晰可辨，一眼就能看出内容分区的最终形态。

在自己的应用中复用并改造三栏模板

该模板的定位是"可修改的起点"（参见 wireframes.md 中的说明），复用与改造的推荐路径如下：

1. 复制组件：将three-column.vue的 template 与 script 部分拷贝进自己项目的任意.vue文件中（建议只保留<script setup>写法），并确认已安装 Vuetify 插件且v-app挂载在应用根组件；
2. 替换占位内容：将三个v-sheet内部替换为真实业务内容——左栏放筛选表单或次级导航列表，中栏放表格/卡片流，右栏放统计面板或活动流；min-height="70vh"可保留作为内容不足时的兜底高度；
3. 改造顶部导航：把硬编码的links数组改为来自路由配置或状态管理的数据，v-tab配合to/replaceprop 即可变成可点击的路由选项卡；头像处可替换为v-btn图标按钮或v-menu用户菜单；
4. 调整比例与断点：三栏宽度不局限于 2/8/2，可改为md="3" md="6" md="3"等组合；也可为lg、xl指定不同列宽实现渐进式响应；若需隐藏某一栏，可将对应v-col改为条件渲染或使用hidden-*断点类。

此外，Wireframe 家族还有其他形态可参考，例如 baseline.vue（带v-navigation-drawer抽屉的基础布局）、constrained.vue（固定宽度左栏 + 搜索框）与 side-navigation.vue（rail 迷你导航栏），它们与三栏模板共用同一套v-app+v-app-bar+v-main骨架，学习时横向对比可以更快理解 Vuetify 应用布局的通用范式。

结语

Three Column 是三栏式后台界面的最小可用骨架：v-app-bar+v-tabs解决全局导航，v-row/v-col的 12 列栅格解决响应式分区，v-sheet解决内容占位。通过three-column.md入口定位到 three-column.vue，再沿align-tabs、v-col--cols-*追查到 VTabs.tsx 与 VGrid.sass 的底层实现，你不仅能直接使用这份模板，更掌握了"文档示例 → 组件源码 → 样式变量"的完整阅读链路，可以举一反三地驾驭 Vuetify 其他 Wireframe 模板与组件体系。

【免费下载链接】vuetify🐉 Vue Component Framework项目地址: https://gitcode.com/gh_mirrors/vu/vuetify