Pvue - Python + Vue 3 框架

Pvue 是一个现代化的框架，将 Vue 3 前端与 Python WebSocket 后端相结合，让开发者能够轻松创建桌面应用程序。它提供了 Python 业务逻辑与 Vue 3 UI 之间的无缝集成，支持 Web 和桌面两种部署方式。

English Version

功能特性

• Vue 3 + Python WebSocket：现代化的前端设计，支持响应式布局和实时通信
• 多种部署模式：Web 服务器、Eel 桌面应用和 PyWebView 桌面应用
• 插件系统：可扩展的架构，便于添加新功能
• 简单打包：支持使用 PyInstaller 创建独立的 EXE 文件
• 响应式设计：适配不同屏幕尺寸的现代化 UI
• 科学计算器：内置示例，包含标准和科学两种模式
• 记事本应用：简单文本编辑器示例
• 俄罗斯方块游戏：经典的俄罗斯方块小游戏示例

安装

前置条件

• Python 3.7+
• pip（Python 包管理器）

从 PyPI 安装

pip install pvue

从源码安装

# 克隆仓库
git clone https://github.com/qeill/pvue.git
cd pvue

# 安装依赖
pip install -r requirements.txt

# 以开发模式安装包
pip install -e .

快速开始

创建一个简单的 Pvue 应用

from pvue.main import PvueApp

# 初始化 Pvue 应用
app = PvueApp()

# 定义一个可以从 Vue 调用的 Python 函数
def hello(name):
    return f"你好, {name}!"

# 注册函数
app.register_function(hello)

# 启动应用
app.run()

访问应用

运行脚本后，打开浏览器并导航到：

http://localhost:8000

使用方法

Web 模式

from pvue.main import PvueApp

app = PvueApp()
app.run(mode='web')  # 默认模式

Eel 桌面模式

from pvue.eel import PvueEelApp

app = PvueEelApp()
app.run()

PyWebView 桌面模式

from pvue.webview import PvueWebViewApp

app = PvueWebViewApp()
app.run()

示例应用

科学计算器

项目包含一个功能完整的科学计算器，支持标准和科学两种模式：

cd test
python scientific_calculator.py

Eel 待办事项应用

cd examples/eel-todo
python main.py

PyWebView 待办事项应用

cd examples/webview-todo
python main.py

俄罗斯方块游戏

项目包含一个经典的俄罗斯方块小游戏：

cd test/elsfk
python tetris.py

项目结构

pvue/
├── backend/           # Python WebSocket 服务器
│   ├── __init__.py
│   └── server.py
├── frontend/          # Vue 3 前端
│   ├── src/
│   │   ├── components/    # 组件
│   │   ├── plugins/       # 插件
│   │   ├── App.vue        # 主应用组件
│   │   ├── main.js        # 入口文件
│   │   └── style.css      # 样式文件
│   ├── index.html         # HTML 模板
│   └── package.json       # 前端依赖配置
├── pvue/              # 主包代码
│   ├── __init__.py
│   ├── main.py         # Web 模式主文件
│   ├── eel.py          # Eel 模式主文件
│   ├── webview.py      # PyWebView 模式主文件
│   └── static/         # 编译后的前端文件
├── examples/          # 示例应用
│   ├── eel-todo/       # Eel 待办事项示例
│   └── webview-todo/   # PyWebView 待办事项示例
├── test/              # 测试应用
│   ├── scientific_calculator.py  # 科学计算器
│   ├── notepad/       # 记事本应用
│   ├── calc/          # 科学计算器（GUI 版）
│   └── elsfk/         # 俄罗斯方块游戏
├── setup.py           # 包配置文件
└── README.md          # 项目文档

架构设计

前端

• Vue 3：使用 Composition API 的现代响应式框架
• WebSocket：与 Python 后端的实时通信
• 插件系统：可扩展的架构，便于添加功能
• 响应式设计：使用 CSS Grid 和 Flexbox 实现布局

后端

• Python 3：业务逻辑实现
• WebSocket 服务器：使用 websockets 库实现实时通信
• 多种模式：Web 服务器、Eel 和 PyWebView 集成
• 函数注册：简单注册 Python 函数，以便从 Vue 调用

插件开发

Pvue 包含一个插件系统，允许您扩展框架功能。有关详细信息，请参考 PLUGIN_DEVELOPMENT.md。

打包应用

使用 PyInstaller 创建独立 EXE

Pvue 支持使用 PyInstaller 将应用打包为单文件 EXE，方便分发和使用。

有关详细的打包步骤和常见问题解决方案，请参考 PYINSTALLER_GUIDE.md。

快速打包命令

# 生成 spec 文件
pyi-makespec -F -w your_app.py

# 编辑 spec 文件，添加静态文件目录
# 然后执行打包
pyinstaller your_app.spec

打包示例

请查看 PYINSTALLER_GUIDE.md 中的完整示例，了解如何打包一个基于 Pvue 框架的科学计算器程序。

配置

服务器配置

app = PvueApp(
    host='localhost',
    port=8000,
    static_dir='path/to/static/files'
)

前端配置

修改 frontend/src/App.vue 中的 Vue 应用，以自定义 UI 和功能。

开发

构建前端

cd frontend
npm install
npm run build

运行开发服务器

cd frontend
npm run dev

运行测试

# 运行后端测试
python -m pytest

# 运行前端测试
cd frontend
npm test

贡献

1. Fork 仓库
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

许可证

本项目采用 MIT 许可证 - 有关详细信息，请参阅 LICENSE.txt 文件。

致谢

• Vue 3：现代化的前端框架
• Python：强大的后端语言
• Eel 和 PyWebView：桌面集成
• websockets 库：实时通信支持

支持

如果您有任何问题或遇到问题，请在 GitHub 上打开一个 issue 或联系维护者。

愉快编码！ 🚀