# Vben

Vben Admin 5.0 前端框架开发技能。用于开发基于 Vue3、Vite、TypeScript 的中后台管理系统。

- Repository: https://github.com/LangChat/langchat (1321 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-09-27
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add LangChat/langchat --skill vben -g -a claude-code -y`
Codex: `npx skills add LangChat/langchat --skill vben -g -a codex -y`
Cursor: `npx skills add LangChat/langchat --skill vben -g -a cursor -y`
Gemini CLI: `npx skills add LangChat/langchat --skill vben -g -a gemini-cli -y`

## Description

Vben Admin 5.0 前端框架开发技能。用于开发基于 Vue3、Vite、TypeScript 的中后台管理系统。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Vben Admin 开发技能

基于 Vben Admin 5.0 文档的专业开发指导技能，帮助快速开发中后台管理系统。

## 项目结构

采用 Monorepo 架构，核心目录：

```
├── apps/                    # 应用目录
│   ├── web-antd/           # Ant Design Vue 应用
│   ├── web-ele/            # Element Plus 应用
│   ├── web-naive/          # Naive UI 应用
│   └── backend-mock/       # Mock 后端服务
├── packages/               # 共享包
│   ├── @core/              # 核心包（UI组件、布局等）
│   ├── effects/            # 副作用包（权限、请求、hooks等）
│   ├── stores/             # 状态管理
│   ├── locales/            # 国际化
│   └── utils/              # 工具函数
└── internal/               # 内部工具配置
```

## 常用命令

```bash
# 开发
pnpm dev:antd          # 启动 Ant Design 应用
pnpm dev:ele           # 启动 Element Plus 应用
pnpm dev:naive         # 启动 Naive UI 应用

# 构建
pnpm build             # 构建所有应用
pnpm build:antd        # 构建指定应用

# 其他
pnpm lint              # 代码检查
pnpm check:type        # 类型检查
pnpm reinstall         # 重新安装依赖
```

## 核心开发指南

### 路由与菜单

路由配置位于 `src/router/routes/modules/` 目录：

```ts
import type { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    meta: {
      icon: 'mdi:home',
      title: $t('page.home.title'),
      authority: ['admin'],      // 权限控制
      order: 1000,               // 菜单排序
      keepAlive: true,           // 开启缓存
      hideInMenu: false,         // 菜单中隐藏
      hideInTab: false,          // 标签页中隐藏
    },
    name: 'Home',
    path: '/home',
    component: () => import('#/views/home/index.vue'),
  },
];

export default routes;
```

### 权限控制

三种模式在 `preferences.ts` 中配置：

```ts
import { defineOverridesPreferences } from '@vben/preferences';

export const overridesPreferences = defineOverridesPreferences({
  app: {
    accessMode: 'frontend',  // 'frontend' | 'backend' | 'mixed'
  },
});
```

按钮级权限：

```vue
<script setup>
import { AccessControl, useAccess } from '@vben/access';
const { hasAccessByCodes, hasAccessByRoles } = useAccess();
</script>

The rest: https://github.com/LangChat/langchat/blob/HEAD/skills/SKILL.md