# antdv-pro-layout

> Ant Design Vue Pro Layout, quickly complete project layouts.

Latest version **5.0.7** (published 2026-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install antdv-pro-layout
pnpm add antdv-pro-layout
yarn add antdv-pro-layout
bun add antdv-pro-layout
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.7 |
| Published | 2026-08-26 |
| First published | 2023-10-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22.0.0 |
| Dependencies | 0 |
| Unpacked size | 195.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tsmask |
| Keywords | Ant Design Vue, ant-design-vue, antdv-next, antdv, antdv-pro, pro-layout |

## Links

- npm: https://www.npmjs.com/package/antdv-pro-layout
- Repository: https://gitee.com/TsMask/antdv-pro-layout
- npm.io page: https://npm.io/package/antdv-pro-layout

## Recent versions

- 5.0.7 (latest) — 2026-08-26
- 4.2.6 (ver4) — 2026-08-20
- 3.3.6 (ver3) — 2026-08-05
- 3.2.6 (legacy) — 2023-10-30
- 5.0.5 — 2026-08-14
- 4.2.5 — 2026-08-05
- 4.2.4 — 2026-07-29
- 4.2.3 — 2026-07-22
- 4.2.2 — 2026-06-25
- 4.2.1 — 2026-04-21
- 4.2.0 — 2024-12-07
- 4.1.9 — 2024-11-04
- 4.1.8 — 2024-10-23
- 3.3.5 — 2024-06-02
- 4.1.7 — 2024-05-26
- … 10 more at https://npm.io/package/antdv-pro-layout/versions

## README

# Ant Design Vue Pro Layout

Ant Design Vue Pro 布局，快速完成项目布局。

[![Vue Support](https://img.shields.io/badge/support-Vue3-green?style=flat)](./package.json)
[![NPM version](https://img.shields.io/npm/v/antdv-pro-layout/latest?style=flat)](https://www.npmjs.com/package/antdv-pro-layout)
[![NPM downloads](https://img.shields.io/npm/dm/antdv-pro-layout.svg?style=flat)](https://www.npmjs.com/package/antdv-pro-layout)
![License MIT](https://img.shields.io/badge/License-MIT-blue.svg)

[中文](./README.md) | [English](./README.en.md)

## 安装 Install

```bash
npm i antdv-next @antdv-next/icons antdv-pro-layout
```

## 功能特性 Features

| 组件 / 函数 | 说明 |
| --- | --- |
| ProLayout | 整体布局外壳，支持 side / top / mix 三种模式、响应式移动端抽屉、拆分菜单 |
| PageContainer | 页面内容区容器，集成 PageHeader + Tabs + 页脚 |
| PageHeader | 自定义页头，对齐 ant-design-vue v4 PageHeader 能力 |
| TabsView | 多标签页管理，配合 `useTabsView` Hook，支持 KeepAlive 缓存与刷新恢复 |
| GlobalSearch | 菜单搜索面板，`Ctrl/Cmd + K` 快捷键唤起，上下键导航 |
| getMenuData / clearMenuItem | 路由表转菜单数据 |
| useMediaScreen / usePrefersColorScheme | 响应式屏幕尺寸 / 系统主题偏好监听 |
| useIconFont | iconfont 图标渲染器（图片 / iconfont / VNode 自动识别） |
| useTabsView / createTabsView | 标签视图状态管理 Hook（单例 / 独立实例） |

完整函数与组件 API、渲染插槽及各组件用法见 [API.md](./API.md)。

更多示例：

- 演示测试 [playground](./playground/)
- 在线测试示例 [stackblitz](https://stackblitz.com/edit/vitejs-vite-9gcs3rs4)
- 项目示例 [mask_vue3_antd](https://gitee.com/TsMask/mask_vue3_antd)

## 源项目仓库分支 Branch

来自 [@ant-design-vue/pro-layout](https://github.com/vueComponent/pro-components)

- next : Vue3 + `ant-design-vue@3.x` (latest)
- v3.1 : Vue3 + `ant-design-vue@2.2.x` (release LTS)
- v2 : Vue2 + `ant-design-vue@1.7.x`

当前版本

- Vue3 + ant-design-vue@4.2.6 ([v4](https://gitee.com/TsMask/antdv-pro-layout/tree/ver4/))
- Vue3 + antdv-next ([v5，当前版本](https://gitee.com/TsMask/antdv-pro-layout/tree/main/))

## 持续维护 Continuous Maintenance

```bash
# 安装所需依赖
npm install

# 打包生成dist目录含d.ts文件
npm run build
```

---
_Source: https://npm.io/package/antdv-pro-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._