# LAN-VUEWEB-ADMIN

**Repository Path**: 674074365/lan-vueweb-admin

## Basic Information

- **Project Name**: LAN-VUEWEB-ADMIN
- **Description**: 通用管理系统前端框架
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-11-11
- **Last Updated**: 2026-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <img alt="Geeker-Admin Logo" src="https://i.imgtg.com/2023/04/13/8tv8F.png" width="120" />
</p>

<h1 align="center">Geeker-Admin</h1>

<p align="center">一款基于 Vue3 + TypeScript + Vite8 的开箱即用中后台管理框架</p>

<p align="center">
  <img src="https://img.shields.io/npm/v/element-plus?style=flat-square&color=409eff" alt="Element Plus" />
  <img src="https://img.shields.io/npm/v/vue?style=flat-square&color=42b883" alt="Vue" />
  <img src="https://img.shields.io/npm/v/vite?style=flat-square&color=646cff" alt="Vite" />
  <img src="https://img.shields.io/npm/v/typescript?style=flat-square&color=3178c6" alt="TypeScript" />
  <img src="https://img.shields.io/npm/v/pinia?style=flat-square&color=ffd859" alt="Pinia" />
</p>

---

## 介绍

Geeker-Admin 是一款基于 **Vue 3.5 + TypeScript 6 + Vite 8 + Pinia 3 + Element Plus 2.14** 开发的开源中后台管理框架。项目采用最新前端技术栈开发，集成丰富的功能和组件，旨在提供一个开箱即用、高效可扩展的后台管理系统解决方案。

## 技术栈

| 技术 | 版本 | 说明 |
|---|---|---|
| [Vue](https://vuejs.org/) | 3.5 | 渐进式 JavaScript 框架 |
| [TypeScript](https://www.typescriptlang.org/) | 6.0 | JavaScript 的超集，提供类型安全 |
| [Vite](https://vitejs.dev/) | 8.0 | 下一代前端构建工具 |
| [Pinia](https://pinia.vuejs.org/) | 3.0 | Vue 状态管理库 |
| [Element Plus](https://element-plus.org/) | 2.14 | 基于 Vue 3 的桌面端组件库 |
| [Vue Router](https://router.vuejs.org/) | 5.0 | Vue.js 官方路由管理器 |
| [Axios](https://axios-http.com/) | 1.16 | 基于 Promise 的 HTTP 客户端 |
| [Vue I18n](https://vue-i18n.intlify.dev/) | 11.4 | Vue.js 国际化插件 |
| [ECharts](https://echarts.apache.org/) | 6.1 | 数据可视化图表库 |

## 项目功能

- **脚本语法**：使用 Vue 3.5 + TypeScript 开发，单文件组件 `<script setup>` 语法
- **构建工具**：采用 Vite 8 作为项目开发与打包工具，支持 gzip/brotli 压缩、跨域代理
- **状态管理**：使用 Pinia 替代 Vuex，轻量、简单、易用，集成 Pinia 持久化插件
- **HTTP 请求**：使用 TypeScript 对 Axios 进行二次封装，支持请求拦截、取消、常用请求封装
- **表格组件**：基于 Element Plus 二次封装 ProTable 组件，表格页面全部为配置项 Columns
- **主题系统**：支持 Element Plus 组件大小切换、多主题布局、暗黑模式
- **国际化**：集成 Vue I18n，支持中英文切换，按模块划分语言包（13 个 JSON 文件）
- **路由权限**：使用 Vue Router 配置动态路由权限拦截，支持路由懒加载和按钮级别权限控制
- **页面缓存**：使用 KeepAlive 对页面进行缓存，支持多级嵌套路由缓存
- **自定义指令**：内置常用自定义指令（权限、复制、水印、拖拽、节流、防抖、长按等）
- **自动导入**：集成 unplugin-auto-import 和 unplugin-vue-components，自动导入 Vue/Pinia/VueRouter/VueI18n API 和 Element Plus 组件
- **代码规范**：使用 Prettier 统一格式化代码，集成 ESLint 9.x Flat Config、Stylelint 代码校验规范
- **Git 规范**：使用 Husky、lint-staged、commitlint、czg、cz-git 规范提交信息
- **开发者工具**：集成 code-inspector-plugin（代码定位）、vite-plugin-vue-devtools（Vue 调试）

## 安装使用

### 环境要求

- Node.js >= 16.18.0
- pnpm（推荐）

### 克隆项目

```bash
# Gitee
git clone https://gitee.com/674074365/lan-vueweb-admin.git

```

### 安装依赖

```bash
pnpm install
```

### 启动开发

```bash
pnpm dev
# 或
pnpm serve
```

### 构建打包

```bash
# 开发环境
pnpm build:dev

# 测试环境
pnpm build:test

# 生产环境
pnpm build:pro
```

### 代码检查

```bash
# ESLint 检测代码
pnpm lint:eslint

# Prettier 格式化代码
pnpm lint:prettier

# Stylelint 格式化样式
pnpm lint:stylelint
```

### 提交代码

```bash
pnpm commit
```

> 提交前会自动执行 `lint:lint-staged` 命令校验代码

## 项目结构

```text
Geeker-Admin
├─ .husky/                    # Husky 配置文件
├─ .vscode/                   # VSCode 推荐配置
├─ docs/                      # VitePress 文档站
├─ vite-config/               # Vite 配置项
│  ├─ getEnv.ts               # 环境变量处理
│  ├─ index.ts                # Vite 基础配置（代理/别名/构建）
│  └─ plugins/                # Vite 插件配置
│     ├─ unplugin-auto-import.js    # API 自动导入
│     ├─ unplugin-vue-components.js # 组件自动导入
│     ├─ vite-plugin-eslint2.js    # ESLint 集成
│     ├─ vite-plugin-compression.js # Gzip/Brotli 压缩
│     └─ ...                        # 其他插件
├─ public/                    # 静态资源（不参与打包）
├─ vite-env/                  # 环境变量文件
│  ├─ .env                    # 通用配置
│  ├─ .env.development        # 开发环境配置
│  ├─ .env.production         # 生产环境配置
│  └─ .env.test               # 测试环境配置
├─ src/
│  ├─ amock/                  # Mock 接口数据
│  ├─ api/                    # API 接口管理
│  │  ├─ config/              # 接口通用配置
│  │  ├─ helper/              # 接口辅助工具
│  │  ├─ interface/           # 接口类型定义
│  │  ├─ modules/             # 接口模块
│  │  └─ index.ts             # 统一导出
│  ├─ assets/                 # 静态资源（图片/字体等）
│  ├─ common/                 # 全局初始化模块
│  │  ├─ globalLocales.ts      # 国际化配置
│  │  ├─ globalDirectives.ts   # 全局指令注册
│  │  ├─ globalInitialize.ts   # 初始化逻辑
│  │  └─ ...
│  ├─ components/             # 全局业务组件
│  │  ├─ Loading/             # 加载组件
│  │  ├─ wc-language/         # 语言切换组件
│  │  ├─ wc-switch-dark/      # 暗黑模式切换组件
│  │  ├─ wc-grid/             # 网格布局组件
│  │  ├─ wc-pro-table/        # ProTable 表格组件
│  │  └─ wc-search-form/      # 搜索表单组件
│  ├─ config/                 # 全局配置项
│  ├─ constant/               # 全局常量
│  ├─ directives/             # 自定义指令
│  │  ├─ auth.ts              # 权限指令 v-auth
│  │  ├─ copy.ts              # 复制指令 v-copy
│  │  ├─ waterMarker.ts       # 水印指令 v-watermark
│  │  ├─ draggable.ts         # 拖拽指令 v-draggable
│  │  └─ debounce/throttle/longpress # 防抖/节流/长按指令
│  ├─ enums/                  # 枚举定义
│  ├─ hooks/                  # Hooks 封装
│  │  ├─ interface/           # Hook 类型定义
│  │  ├─ layout/              # 布局相关 Hook
│  │  ├─ useTable.ts         # 表格 Hook
│  │  ├─ useAuthButtons.ts   # 权限按钮 Hook
│  │  ├─ useDownload.ts      # 下载 Hook
│  │  └─ ...
│  ├─ languages/              # 国际化语言包
│  │  ├─ ZH-CN/              # 中文
│  │  │  ├─ layout.json       # 布局相关
│  │  │  ├─ system.json       # 系统管理
│  │  │  ├─ dashboard.json    # 仪表盘
│  │  │  └─ example*.json     # 示例模块（10个）
│  │  └─ US-EN/              # 英文（同上结构）
│  ├─ layoutUI/               # UI 页面（登录/首页）
│  │  ├─ index/               # 入口页 loading 动画
│  │  ├─ login/               # 登录页
│  │  └─ home/                # 首页
│  ├─ layouts/                # 框架布局模块
│  │  ├─ components/          # 布局子组件
│  │  │  ├─ Header/            # 顶部导航
│  │  │  ├─ Main/              # 主内容区
│  │  │  ├─ Menu/              # 侧边菜单
│  │  │  ├─ Tabs/              # 标签页
│  │  │  ├─ Footer/            # 底部信息
│  │  │  └─ ThemeDrawer/       # 主题设置抽屉
│  │  └─ index.vue            # 布局入口（支持动态/静态加载）
│  ├─ routers/                # 路由管理
│  │  ├─ index.ts             # 路由初始化
│  │  ├─ permission.ts        # 路由守卫/权限拦截
│  │  └─ modules/             # 路由模块
│  ├─ stores/                 # Pinia 状态管理
│  │  ├─ helper/              # Store 辅助工具
│  │  ├─ interface/           # Store 类型定义
│  │  ├─ layout/              # 布局状态
│  │  └─ modules/             # 业务状态模块
│  ├─ styles/                 # 全局样式文件
│  ├─ typings/                # 全局 TypeScript 声明
│  ├─ utils/                  # 工具库
│  │  ├─ layouts/             # 布局相关工具
│  │  └─ ...
│  ├─ views/                  # 页面视图
│  │  ├─ components/          # 仪表盘组件
│  │  ├─ system/              # 系统管理页面
│  │  └─ example/             # 示例页面
│  ├─ App.vue                 # 根组件
│  └─ main.ts                 # 入口文件
├─ index.html                 # HTML 入口
├─ package.json               # 依赖管理
├─ tsconfig.json              # TypeScript 配置
├─ .prettierrc.cjs            # Prettier 配置
├─ .stylelintrc.cjs           # Stylelint 配置
└─ README.md                  # 项目说明
```

## 国际化配置

项目使用 `vue-i18n` 实现国际化，按模块划分语言包文件：

| 语言包文件 | 覆盖模块 |
|---|---|
| `layout.json` | 布局组件（Header、Menu、Tabs、ThemeDrawer、登录页等） |
| `system.json` | 系统管理（账号、部门、字典、角色、日志、菜单等） |
| `dashboard.json` | 仪表盘组件 |
| `exampleDataScreen.json` | 数据大屏 |
| `exampleProTable.json` | 高级表格 |
| `exampleAssembly.json` | 组件示例 |
| `exampleAuth.json` | 权限管理示例 |
| `exampleDirectives.json` | 自定义指令示例 |
| `exampleLink.json` | 外部链接示例 |
| `exampleMenu.json` | 菜单嵌套示例 |
| `exampleForm.json` | 表单示例 |
| `exampleDashboard.json` | 仪表盘示例 |
| `exampleComponents.json` | 通用组件示例（SelectIcon、WangEditor 等） |

## 浏览器支持

| ![Edge](https://i.imgtg.com/2023/04/11/8zr3p.png) | ![Firefox](https://i.imgtg.com/2023/04/11/8zKiU.png) | ![Chrome](https://i.imgtg.com/2023/04/11/8zNrx.png) | ![Safari](https://i.imgtg.com/2023/04/11/8zeGj.png) |
| :---: | :---: | :---: | :---: |
| last 2 versions | last 2 versions | last 2 versions | last 2 versions |

> 不再支持 IE 浏览器

## 项目截图

### 登录页

![login_light](https://i.imgtg.com/2023/04/13/8tknp.png)
![login_dark](https://i.imgtg.com/2023/04/13/8tmpP.png)

### 首页

![home_light](https://i.imgtg.com/2023/04/13/8tl1j.png)
![home_dark](https://i.imgtg.com/2023/04/13/8tpfb.png)

### 表格页

![table_light](https://i.imgtg.com/2023/04/13/8tfMx.png)
![table_dark](https://i.imgtg.com/2023/04/13/8tv8F.png)

### 数据可视化

![dashboard](https://i.imgtg.com/2023/04/14/82Grx.png)

### 数据大屏

![dataScreen](https://i.imgtg.com/2023/01/16/QP8HF.png)

## 项目链接

- 在线预览：http://www.webadmin.lanlianjiu.xyz
- Gitee：https://gitee.com/674074365/lan-vueweb-admin

## 参考的相关链接

- 在线预览：https://admin.spicyboy.cn
- 项目文档：https://docs.spicyboy.cn
- 更新日志：[CHANGELOG.md](./CHANGELOG.md)
- Gitee：https://gitee.com/HalseySpicy/Geeker-Admin
- GitHub：https://github.com/HalseySpicy/Geeker-Admin

## 开源协议

[MIT](./LICENSE)