Vben框架的安装
安装
bash
git clone https://gitee.com/annsion/vue-vben-admin.git- 安装依赖
bash
pnpm install- 运行项目
bash
pnpm run dev项目结构
- 本项目是 Vue Vben Admin 的 Monorepo 仓库，基于 pnpm workspace + Turborepo 管理，一套核心代码同时支持 Ant Design Vue、Element Plus、Naive UI 三套 UI 框架。
Vben Admin 项目架构图
本项目是 Vue Vben Admin 的 Monorepo 仓库，基于 pnpm workspace + Turborepo 管理，一套核心代码同时支持 Ant Design Vue、Element Plus、Naive UI 三套 UI 框架。
整体架构
demo1/ # Monorepo 根目录
│
├── apps/ # 应用层（可独立运行的应用）
│ ├── web-antd/ # Ant Design Vue 版本（默认主应用）
│ ├── web-ele/ # Element Plus 版本
│ ├── web-naive/ # Naive UI 版本
│ └── backend-mock/ # 后端 Mock 服务（Nitro 驱动）
│
├── packages/ # 公共包层（跨应用共享）
│ ├── @core/ # 框架核心（与 UI 无关）
│ │ ├── base/ # 基础设施
│ │ │ ├── design/ # 全局样式、设计令牌、CSS 变量
│ │ │ ├── icons/ # 图标封装（Lucide）
│ │ │ ├── shared/ # 工具函数：cache、color、utils、全局状态
│ │ │ └── typings/ # 全局 TypeScript 类型定义
│ │ ├── composables/ # 通用组合式函数（useSortable 等）
│ │ ├── preferences/ # 偏好设置（主题、布局、灰色模式等）
│ │ └── ui-kit/ # UI 无关的组件套件
│ │ ├── form-ui/ # 表单引擎（VbenForm）
│ │ ├── layout-ui/ # 布局组件（侧栏、顶栏、标签栏）
│ │ ├── menu-ui/ # 菜单组件
│ │ ├── popup-ui/ # 弹窗组件（Modal / Drawer）
│ │ ├── shadcn-ui/ # shadcn 风格基础组件库
│ │ └── tabs-ui/ # 多标签页组件
│ │
│ ├── constants/ # 全局常量
│ ├── effects/ # 业务效果层（核心能力的集成封装）
│ │ ├── access/ # 权限控制（指令 + 函数）
│ │ ├── common-ui/ # 通用 UI 封装
│ │ ├── hooks/ # 业务 hooks（分页、刷新、水印等）
│ │ ├── layouts/ # 完整布局方案（basic / iframe / widgets）
│ │ ├── plugins/ # 第三方插件集成（echarts、vxe-table）
│ │ └── request/ # Axios 请求封装
│ ├── icons/ # 项目级图标（iconify / svg）
│ ├── locales/ # 国际化语言包（zh-CN / en-US）
│ ├── preferences/ # 偏好设置对外封装
│ ├── stores/ # Pinia 状态（access / lock / tabbar / user）
│ ├── styles/ # 各 UI 框架样式适配（antd / ele / global）
│ ├── types/ # 公共业务类型定义
│ └── utils/ # 业务工具（菜单生成、路由重置）
│
├── internal/ # 内部构建/开发工具（不对外发布）
│ ├── node-utils/ # Node 工具（fs、git、monorepo、prettier）
│ ├── tailwind-config/ # 共享 Tailwind 配置
│ ├── tsconfig/ # 共享 TS 配置（base / web / node / library）
│ └── vite-config/ # 共享 Vite 配置与插件（license、importmap 等）
│
├── docs/ # 官方文档站（VitePress）
├── playground/ # 功能演示 / 完整示例应用（含 e2e 测试）
├── scripts/ # 仓库脚本（如 clean.mjs 清理）
│
├── .changeset/ # 版本管理与 changelog 生成配置
├── .husky/ # Git hooks（commit 校验、lint）
├── .vscode/ # 编辑器统一配置
└── 根目录配置文件 # pnpm-workspace / eslint / prettier / stylelint 等应用内部结构（以 web-ele 为例）
apps/web-ele/
├── src/
│ ├── adapter/ # 适配层：把 @core 的 UI 无关组件桥接到 Element Plus
│ │ ├── component/ # 全局组件注册
│ │ ├── form.ts # 表单组件映射
│ │ └── vxe-table.ts # vxe-table 适配
│ ├── api/ # 接口请求定义（auth / menu / user）+ request 实例
│ ├── layouts/ # 布局入口（basic 基础布局 / auth 登录布局）
│ ├── locales/ # 应用级语言包
│ ├── router/ # 路由
│ │ ├── routes/ # 静态路由（core）与业务路由模块（modules/）
│ │ ├── guard.ts # 路由守卫（登录、权限、进度条）
│ │ └── access.ts # 动态路由 / 权限生成
│ ├── store/ # 应用级 Pinia store（auth）
│ ├── views/ # 页面
│ │ ├── _core/ # 框架内置页面（登录、404、403 等）
│ │ ├── dashboard/ # 仪表盘
│ │ └── demos/ # 演示页
│ ├── bootstrap.ts # 应用初始化（注册插件、i18n、store、router）
│ ├── main.ts # 入口
│ └── preferences.ts # 偏好设置覆盖
├── vite.config.mts # Vite 配置（复用 internal/vite-config）
└── index.html分层依赖关系
┌─────────────────────────────────────────────┐
│ apps (web-antd / web-ele / web-naive) │ ← 应用，只做装配
├─────────────────────────────────────────────┤
│ packages/effects (layouts/access/request…) │ ← 业务效果集成层
├─────────────────────────────────────────────┤
│ packages (locales/stores/utils/types…) │ ← 公共业务包
├─────────────────────────────────────────────┤
│ packages/@core (ui-kit/preferences/base) │ ← UI 无关核心框架
├─────────────────────────────────────────────┤
│ internal (vite-config/tsconfig/tailwind) │ ← 构建与规范底座
└─────────────────────────────────────────────┘核心设计思想：@core 与具体 UI 框架完全解耦，通过各应用的 adapter/ 适配层桥接 AntD / Element / Naive，实现「一次开发，三套 UI」。
各顶层目录职责速查
| 目录 | 作用 |
|---|---|
apps/ | 可运行的前端应用与 mock 服务 |
packages/ | 共享源码包（核心框架 + 业务能力） |
internal/ | 构建工具与共享配置，不发布 |
docs/ | VitePress 文档站 |
playground/ | 完整功能演示应用 + Playwright e2e 测试 |
scripts/ | 仓库级维护脚本 |
.changeset/ | 多包版本发布管理 |
.husky/ | Git 提交钩子（commitlint、lint-staged） |
改动
- 后面我们重点在web-ele应用上开发