# ElectronVueAdmin

**Repository Path**: Jopfree/ElectronVueAdmin

## Basic Information

- **Project Name**: ElectronVueAdmin
- **Description**: 基于https://github.com/pure-admin/electron-pure-admin更新最新版本库及更新使用说明文档
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-29
- **Last Updated**: 2026-10-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# electron-vue-admin

基于 **Electron + Vue 3 + Vite + TypeScript + Element Plus** 的桌面端管理后台脚手架，提供登录鉴权、动态路由、按钮级权限、多标签页、主题切换等常用能力，可同时作为 Electron 应用或纯 Web 管理端使用。

平台显示名称可通过 `public/platform-config.json` 配置（当前为 **Electron Vue Admin**）。

## 技术栈

| 类别 | 技术 |
| --- | --- |
| 桌面端 | Electron 35、electron-builder 25 |
| 框架 | Vue 3.5、Vue Router 4、Pinia 3 |
| 构建 | Vite 6、TypeScript 5.9 |
| UI | Element Plus、Tailwind CSS 4、@pureadmin/table |
| 工具 | Axios、VueUse、ECharts 5、dayjs、Iconify |
| 工程化 | ESLint 9、Prettier、Stylelint、Husky、Commitlint |

## 功能特性

- Electron 主进程 / Preload / 渲染进程分离，开发态自动对接 Vite Dev Server
- 支持 Windows（NSIS）、macOS（DMG）、Linux（deb / AppImage）打包
- 也可仅构建 Web 端（`web:dev` / `web:build`）
- 登录鉴权、Token 刷新、动态路由与菜单
- 页面级 / 按钮级权限（指令 + 组件）
- 多标签页、KeepAlive、布局切换（侧栏 / 顶栏等）
- 亮色 / 暗色主题、Element Plus 主题色可配置
- 本地 Mock（`vite-plugin-fake-server`）便于前后端分离开发
- 响应式布局与平台运行时配置（`platform-config.json`）

## 环境要求

- Node.js：`^18.18.0` 或 `^20.9.0` 或 `>=22.0.0`（推荐使用 `.nvmrc` 中的 `v22.14.0`）
- 包管理器：**Yarn Classic 1.x**（仅保留 `yarn.lock`；本仓库已声明 `packageManager: yarn@1.22.22`，避免被上级目录的 pnpm 约束影响）

## 快速开始

```bash
# 安装依赖
yarn install

# Electron 开发（Vite + Electron 同时启动）
yarn dev

# 仅 Web 开发（浏览器访问，默认端口 8090，会自动打开浏览器）
yarn web:dev
```

开发态默认地址：`http://localhost:8090`（`vite.config.ts` 中已开启 `server.open`）

## 常用脚本

| 命令 | 说明 |
| --- | --- |
| `yarn dev` / `yarn serve` | Electron + Vite 开发 |
| `yarn web:dev` | 仅 Web 开发 |
| `yarn web:build` | 仅构建 Web 产物到 `dist/` |
| `yarn build` | 构建并打包 Electron 安装包到 `release/` |
| `yarn build:staging` | 使用 staging 模式构建并打包 |
| `yarn preview` | 预览已构建的 Web 产物 |
| `yarn typecheck` | TypeScript / Vue 类型检查 |
| `yarn lint` | ESLint + Prettier + Stylelint |
| `yarn icon` | 根据 `public/icon.png` 生成各平台图标 |

## 环境变量

| 文件 | 用途 |
| --- | --- |
| `.env` | 公共变量（如端口、是否隐藏首页） |
| `.env.development` | 开发环境 |
| `.env.staging` | 预发环境 |
| `.env.production` | 生产环境 |

常用变量：

- `VITE_PORT`：开发服务器端口（默认 `8090`）
- `VITE_PUBLIC_PATH`：静态资源公共路径
- `VITE_ROUTER_HISTORY`：路由模式（`hash` / `h5` 等）
- `VITE_CDN`：是否启用 CDN 替换
- `VITE_COMPRESSION`：是否启用 gzip / brotli 压缩
- `VITE_HIDE_HOME`：是否隐藏首页菜单

## 目录结构

```text
├── build/                 # Vite 插件、优化、图标与构建工具
├── electron/
│   ├── main/              # Electron 主进程
│   └── preload/           # Preload 脚本（contextBridge）
├── mock/                  # 本地 Mock 接口
├── public/
│   └── platform-config.json   # 运行时平台配置
├── src/
│   ├── api/               # 接口封装
│   ├── assets/            # 静态资源、图标字体
│   ├── components/        # 业务通用组件（Re*）
│   ├── config/            # 平台配置读取
│   ├── directives/        # 自定义指令（auth / perms / copy 等）
│   ├── layout/            # 布局与导航
│   ├── plugins/           # Element Plus、ECharts 等插件
│   ├── router/            # 路由与权限相关逻辑
│   ├── store/             # Pinia 状态
│   ├── style/             # 全局样式、主题
│   ├── utils/             # HTTP、鉴权、工具函数
│   └── views/             # 页面（登录、首页、权限示例、错误页）
├── types/                 # 全局类型声明
├── electron-builder.json5 # Electron 打包配置
├── vite.config.ts
└── package.json
```

## 打包说明

详细步骤见：**[docs/打包与发布.md](./docs/打包与发布.md)**

文档覆盖：Web / EXE 产物目录、版本号、**应用名称**、**安装包文件名（artifactName）**、**图标**、发布方式与 FAQ。

快速命令：

```bash
# 仅 Web → 产物在 dist/
yarn web:build

# Windows EXE → 产物在 release/<version>/
yarn build
```

常用改法速记：

| 改什么 | 改哪里 |
| --- | --- |
| 版本号 | `package.json` → `version`（+ 建议同步 `platform-config.json` → `Version`） |
| 安装包 `.exe` 文件名 | `electron-builder.json5` → `win.artifactName` |
| 产品名 / 快捷方式 | 同文件 → `productName` / `nsis.shortcutName` |
| 界面标题 | `public/platform-config.json` → `Title` |
| 应用图标 | 替换 `public/icon.png` 后重新 `yarn build` |

## 平台配置

`public/platform-config.json` 控制标题、布局、主题、多标签缓存等运行时行为，例如：

- `Title`：应用标题
- `Layout`：布局模式（如 `vertical`）
- `Theme` / `DarkMode` / `EpThemeColor`：主题相关
- `KeepAlive` / `MultiTagsCache`：缓存与多标签
- `ShowLogo` / `HideTabs` / `HideFooter`：界面开关

修改后刷新页面即可生效（开发态）。

## 扩展开发建议

1. **新增页面**：在 `src/views/` 增加页面，并在 `src/router/modules/` 注册路由。
2. **接口对接**：在 `src/api/` 编写请求，HTTP 封装见 `src/utils/http/`。
3. **权限**：使用 `v-auth` / `v-perms` 指令，或 `<Auth>` / `<Perms>` 组件。
4. **Electron API**：在 `electron/preload` 通过 `contextBridge` 暴露，渲染进程使用 `window.ipcRenderer`。
5. **仅 Web 部署**：执行 `yarn web:build`，将 `dist/` 部署到静态服务器即可。

## License

[MIT](./LICENSE)