Vuetify 三栏 Wireframe 布局模板实战从示例组件到响应式栅格源码解析【免费下载链接】vuetify Vue Component Framework项目地址: https://gitcode.com/gh_mirrors/vu/vuetifyVuetify 官方文档将一系列开箱即用的页面骨架称为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本身是一个典型的文档入口文件包含两部分内容frontmatter 元信息声明layout: wireframe并提供titleThree column Wireframe、keywordsvuetify wireframe、vuetify app、vue app与descriptionA three-column wireframe template for Vuetify三组 SEO/检索元数据页面主体通过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 idinspire v-app-bar classpx-3 densitycompact flat v-avatar classhidden-md-and-up colorgrey-darken-1 size32 /v-avatar v-spacer/v-spacer v-tabs align-tabscenter colorgrey-darken-2 v-tab v-forlink in links :keylink :textlink /v-tab /v-tabs v-spacer/v-spacer v-avatar classhidden-sm-and-down colorgrey-darken-1 size32 /v-avatar /v-app-bar v-main classbg-grey-lighten-3 v-container v-row v-col cols12 md2 v-sheet min-height268 roundedlg !-- -- /v-sheet /v-col v-col cols12 md8 v-sheet min-height70vh roundedlg !-- -- /v-sheet /v-col v-col cols12 md2 v-sheet min-height268 roundedlg !-- -- /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 md2左栏v-sheet 占位 ├── v-col md8中栏v-sheet 主内容占位 └── v-col md2右栏v-sheet 占位从上到下可以拆解为「顶部应用栏」与「内容区三栏栅格」两大模块下面分别深入。顶部应用栏v-app-bar 与 v-tabs 的配合应用栏承载了模板的全局导航。其关键配置如下classpx-3为应用栏内容添加左右 3 单位的内边距Vuetify spacing 工具类使头像与选项卡不贴边densitycompact使用紧凑密度压缩应用栏高度适合信息密度较高的后台类界面flat去掉阴影与 elevation让应用栏与下方浅灰内容区视觉上更接近、更扁平。应用栏内部是「左头像 — 间距 — 居中选项卡 — 间距 — 右头像」的对称排布左右各一个v-avatar通过响应式显隐类实现移动端/桌面端的差异化展示左侧头像带hidden-md-and-upmd 及以上断点隐藏右侧头像带hidden-sm-and-downsm 及以下断点隐藏。从源码结构看这样设计的意图是小屏时左侧头像代表菜单入口大屏时右侧头像代表用户入口避免同屏出现两个头像两个v-spacer把中间内容推挤到水平居中中部v-tabs设置align-tabscenter使选项卡整体居中、colorgrey-darken-2调整文字颜色内部用v-forlink in links渲染 4 个v-tab:textlink直接以文本形式呈现标签。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组成典型的三栏布局列移动端 md桌面端≥ md用途左栏cols12占满整行md2占 2/12侧边栏/工具区占位中栏cols12占满整行md8占 8/12主内容区占位右栏cols12占满整行md2占 2/12辅助信息区占位这套写法基于 Vuetify 的 12 列栅格系统每个断点base、sm、md、lg、xl、xxl都可独立指定列宽未指定的断点自动继承上一档。因此cols12 md2的含义是「小屏时占满整行、从 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按指定份数分配宽度。理解了这条链路就能明白模板中md2、md8最终是如何落地为真实布局的也能在需要时通过v-row的columnsprop 或自定义列数做灵活调整。三个v-col内部各放一个v-sheet作为占位卡片统一设置roundedlg大圆角与不同min-height左右栏 268px中栏70vh视口高度的 70%。v-sheet是 Vuetify 中通用的纸张容器可叠加color、elevation、rounded等视觉属性模板配合v-main上的bg-grey-lighten-3浅灰背景使三个白色圆角区块在页面上清晰可辨一眼就能看出内容分区的最终形态。在自己的应用中复用并改造三栏模板该模板的定位是可修改的起点参见 wireframes.md 中的说明复用与改造的推荐路径如下复制组件将three-column.vue的 template 与 script 部分拷贝进自己项目的任意.vue文件中建议只保留script setup写法并确认已安装 Vuetify 插件且v-app挂载在应用根组件替换占位内容将三个v-sheet内部替换为真实业务内容——左栏放筛选表单或次级导航列表中栏放表格/卡片流右栏放统计面板或活动流min-height70vh可保留作为内容不足时的兜底高度改造顶部导航把硬编码的links数组改为来自路由配置或状态管理的数据v-tab配合to/replaceprop 即可变成可点击的路由选项卡头像处可替换为v-btn图标按钮或v-menu用户菜单调整比例与断点三栏宽度不局限于 2/8/2可改为md3 md6 md3等组合也可为lg、xl指定不同列宽实现渐进式响应若需隐藏某一栏可将对应v-col改为条件渲染或使用hidden-*断点类。此外Wireframe 家族还有其他形态可参考例如 baseline.vue带v-navigation-drawer抽屉的基础布局、constrained.vue固定宽度左栏 搜索框与 side-navigation.vuerail 迷你导航栏它们与三栏模板共用同一套v-appv-app-barv-main骨架学习时横向对比可以更快理解 Vuetify 应用布局的通用范式。结语Three Column 是三栏式后台界面的最小可用骨架v-app-barv-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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考