# python-eel-vue-start

**Repository Path**: liuyuhui071127/python-eel-vue-start

## Basic Information

- **Project Name**: python-eel-vue-start
- **Description**: 简单的工程；做小工具用方便；
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-20
- **Last Updated**: 2026-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Eel-Vue Desktop Application

## 架构

本项目采用 **Python Eel + Vue 3** 前后端分离的桌面应用架构：

```
┌─────────────────────────────────────────────────────────┐
│                    Desktop App                          │
├──────────────────────┬──────────────────────────────────┤
│   Python Backend    │       Vue 3 Frontend              │
│   (Eel Framework)   │       (TypeScript + Vite)        │
│                     │                                   │
│  ┌───────────────┐  │  ┌────────────┐ ┌──────────────┐  │
│  │  main.py      │  │  │  App.vue   │ │  main.ts     │  │
│  │  - Eel Server │  │  │  - UI      │ │  - Entry     │  │
│  │  - Py/JS Bridge│  │  │  - Logic   │ │  - Eel Init  │  │
│  │  - Logging    │  │  └────────────┘ └──────────────┘  │
│  └───────────────┘  │                                   │
└──────────────────────┴──────────────────────────────────┘
```

**技术栈：**
- 后端：Python + Eel（实现 Python 与 JavaScript 双向通信）
- 前端：Vue 3 + TypeScript + Vite
- 打包：PyInstaller

---

## 功能

1. **Python-JavaScript 双向通信**
   - JavaScript 调用 Python 函数：`window.eel.say_hello_js()`
   - Python 调用 JavaScript 函数：通过 `@eel.expose` 装饰器暴露

2. **日志系统**
   - Python 端日志写入 `log.txt` 文件
   - 前端日志实时显示在页面上

3. **多模式支持**
   - 开发模式：前端热更新，Chrome 开发者工具
   - 生产模式：打包后独立运行

4. **跨平台桌面应用**
   - Windows 桌面应用
   - 自动处理浏览器兼容（Chrome/Edge）

---

## 架构中的主要代码

### 1. Python 后端 (main.py)

**Eel 初始化与函数暴露：**
```python
@eel.expose
def say_hello_py(x):
    write_log("Hello from %s" % x)
    log_message("say_hello_py called with: %s" % x)

@eel.expose
def say_hello_js(x):
    write_log("Hello from %s" % x)
    log_message("say_hello_js called with: %s" % x)
    return "Python received: " + x
```

**Eel 启动配置：**
```python
def start_eel(develop):
    if develop:
        directory = 'frontend/src'
        eel_kwargs = dict(mode='chrome', host="localhost", port=9000)
    else:
        directory = get_web_directory()
        eel_kwargs = dict(mode='chrome', port=0, size=(1280, 800))
    
    eel.init(directory)
    eel.start(page, **eel_kwargs)
```

### 2. Vue 前端 (App.vue)

**Eel 调用 Python：**
```typescript
const callPython = () => {
  window.eel.say_hello_js('JavaScript calling!')((result: string) => {
    message.value = result + '<br>Python World!'
  })
}
```

**等待 Eel 初始化：**
```typescript
const waitForEel = (timeout = 10000): Promise<void> => {
  return new Promise((resolve, reject) => {
    const check = () => {
      if (window.eel) {
        resolve()
      } else {
        setTimeout(check, 100)
      }
    }
    check()
  })
}
```

---

## 调试命令

**1. 启动前端开发服务器（单独）：**
```bash
cd frontend
npm run dev
```

**2. 启动 Python 后端（开发模式）：**
```bash
python main.py -dev
```

**3. 同时启动前后端：**
在两个终端分别执行：
```bash
# 终端1
cd frontend && npm run dev

# 终端2
python main.py -dev
```

---

## 编译命令

**1. 编译前端：**
```bash
cd frontend
npm run build
```

**2. 打包桌面应用（使用 PyInstaller）：**
```bash
# 先确保已安装依赖
pip install -r requirements.txt
pip install pyinstaller

# 运行构建脚本
build_app.cmd
```

或手动执行：
```bash
python -m PyInstaller main.spec
```

---

## 执行命令

**1. 开发模式运行：**
```bash
python main.py -dev
```

**2. 生产模式运行：**
```bash
python main.py
```

**3. 运行打包后的可执行文件：**
```bash
dist\eel-vue.exe
```

---

## 项目结构

```
python-eel-vue-start/
├── main.py                 # Python 后端入口
├── requirements.txt        # Python 依赖
├── build_app.cmd          # 构建脚本
├── main.spec              # PyInstaller 配置
├── readme.md              # 项目文档
└── frontend/
    ├── package.json       # 前端依赖
    ├── vite.config.ts     # Vite 配置
    ├── index.html         # HTML 入口
    └── src/
        ├── main.ts        # 前端入口
        ├── App.vue        # 主组件
        └── env.d.ts       # 类型声明
```