PrimeVue 的“Built in Layers”分层架构是什么意思?

PrimeVue 的“Built in Layers”指的是同一个 UI 组件（例如 Dialog）提供多个抽象层级，开发者可以按项目需要选择从底层原语到开箱即用样式组件的不同版本。根据 PrimeVue 官网的说明，这种分层让“同一个 Dialog，有四种抽象层级，选适合你的那一层”成为可能。它适合既想要底层控制、又不想为每个组件重写样式的 Vue 项目；如果项目只需要一套固定外观、不打算深度定制，直接用最高层的样式组件即可。

四个抽象层级分别是什么

官网在“Built in Layers”区块列出了四个文件名，对应从低到高的抽象层级：

需要说明的是，官网只给出了这四个层级的名称和“选适合你的那一层”的定位，并未逐一展开每层的 API 细节。因此上表中的“典型用途”是基于层级命名和官网整体描述的合理归纳，具体接口应以对应版本文档为准。

分层与主题定制如何配合

分层架构和主题系统是两套并行的能力。官网的“Your Design System”区块说明，主题由多层设计令牌架构驱动，可以通过一个 preset 统一修改颜色、间距、圆角等，也可以按组件覆盖。页面示例给出的可调项包括：

• radius: 0.5rem
• primary: #6366f1
• padding: 1.25rem
• fontSize: 14px

同时官网列出了 Aura、Lara、Nora、Material 等预设主题。这意味着：如果你选样式层或主题层，外观调整主要靠令牌和 preset；如果你选原语层，则更多由你自己接管样式，令牌的作用相对减弱。选择层级时，应把“谁来控制外观”作为第一判断标准。

怎么选：按控制权与交付速度权衡

可以用两个问题快速定位：

1. 外观是否需要完全自定义？ 需要完全自定义，选原语层；只需在默认外观上做品牌化调整，选样式层配合主题令牌。
2. 是否已有成熟设计系统？ 有，优先用主题层把令牌对齐设计系统；没有，直接用样式层的默认主题更快。

官网强调“导入一个组件、传入数据，就得到生产级 UI，没有样板代码、没有繁琐配置”，这对应的是较高抽象层级的使用体验。层级越低，控制力越强，但需要自己承担的部分也越多。

上手方式与验证

官网给出的安装入口是：

npm install primevue

组件从 primevue 导入，官网开发者体验区块的示例写法为：

import { DataTable, Column, Dialog, Button } from 'primevue'

安装后建议先做一个最小验证：引入一个带交互的组件（如 Dialog），检查键盘 Tab、方向键、Enter、Escape 是否可用，以及焦点是否被正确限制和恢复。官网称组件默认符合 WCAG，并自动处理键盘导航、屏幕阅读器语义、ARIA 属性和焦点管理；用这个最小用例即可确认所选层级是否保留了这些行为。

常见卡点有两个：一是选了原语层却发现可访问性行为需要自己补齐，此时应回到更高层级；二是主题令牌改了但组件未生效，通常是 preset 未正确挂载，需对照主题文档检查接入方式。