nicegui:简单易用的 Python UI 框架

┌─────────────────────────────────────────────┐│                 浏览器（Chrome/Firefox 等）     ││    Vue 3 + Quasar Framework + Tailwind CSS    │├─────────────────────────────────────────────┤│              WebSocket 双向通信                │├─────────────────────────────────────────────┤│              FastAPI（Python 后端）            ││    uvicorn ASGI 服务器 + NiceGUI 框架         │└─────────────────────────────────────────────┘

# 1. 创建并激活虚拟环境（强烈推荐）python -m venv venv# Windows:venv\Scripts\activate# macOS/Linux:source venv/bin/activate# 2. 安装 NiceGUIpip install nicegui

python -c "import nicegui; print(nicegui.__version__)"

conda install -c conda-forge nicegui

# 拉取官方镜像docker pull zauberzeug/nicegui:latest# 运行（假设你的代码在当前目录的 main.py）docker run -it --restart always \  -p 8080:8080 \  -v $(pwd):/app \  zauberzeug/nicegui:latest

version: '3.8'services:  nicegui:    image: zauberzeug/nicegui:latest    restart: always    ports:      - "80:8080"    environment:      - PUID=1000   # 改成你的用户ID      - PGID=1000   # 改成你的组ID    volumes:      - ./:/app/

docker-compose up -d

from nicegui import uiui.label('Hello NiceGUI!')ui.button('点我', on_click=lambda: ui.notify('按钮被按下了！'))ui.run()

python main.py

from nicegui import ui# 数据存储（实际项目建议用数据库）tasks = []def add_task():    task = {'text': task_input.value, 'done': False}    tasks.append(task)    task_input.value = ''    task_list.refresh()def toggle_task(e):    tasks[e.index]['done'] = not tasks[e.index]['done']    task_list.refresh()def delete_task(e):    tasks.pop(e.index)    task_list.refresh()# ---- UI 定义 ----ui.label('📋 任务管理看板').classes('text-2xl font-bold')with ui.row():    task_input = ui.input(placeholder='输入新任务...')    ui.button('添加', on_click=add_task)task_list = ui.aggrid(    columns=[        {'name': 'text', 'label': '任务', 'field': 'text'},        {'name': 'done', 'label': '状态', 'field': 'done'},    ],    rows=len(tasks),    row_key='text',).classes('w-full')# 绑定事件task_list.on('cell-click', toggle_task)task_list.on('row-dblclick', delete_task)ui.run(title='任务看板', port=8080)

python main.py# 默认: http://localhost:8080# 指定端口: ui.run(port=3000)# 指定主机: ui.run(host='0.0.0.0')  # 局域网可访问

# DockerfileFROM zauberzeug/nicegui:latestWORKDIR /appCOPY . .CMD ["python", "main.py"]

docker build -t my-nicegui-app .docker run -d -p 80:8080 --restart always my-nicegui-app

# 安装 PyInstallerpip install pyinstaller# 打包为单个可执行文件nicegui-pack main.py# 生成的文件在 dist/ 目录下# 双击即可运行，无需 Python 环境

ui.run(    ssl_keyfile='key.pem',    ssl_certfile='cert.pem')

server {    listen 443 ssl;    server_name app.example.com;    ssl_certificate /path/to/cert.pem;    ssl_certificate_key /path/to/key.pem;    location / {        proxy_pass http://127.0.0.1:8080;        proxy_http_version 1.1;        proxy_set_header Upgrade $http_upgrade;        proxy_set_header Connection "upgrade";    }}

# 关闭热重载（生产环境建议关闭）ui.run(reload=False)

with ui.card():    ui.label('卡片标题').classes('text-lg font-bold')    with ui.row():        ui.button('左')        ui.button('右')

from nicegui import app@app.page('/')def home():    ui.label('首页')@app.page('/about')def about():    ui.label('关于我们')ui.run()

from nicegui import approuter = app.include_router(home_router)router = app.include_router(login_router)

@ui.refreshabledef fetch_data():    # 这个函数会定期自动刷新    return ui.label(f'当前时间: {datetime.now()}')ui.timer(1.0, fetch_data)  # 每秒刷新

app.users.enable_registration()app.users.enable_verification()

# 一键启动python -m venv venv && source venv/bin/activate && pip install nicegui -i https://pypi.douban.com/simple && python -c "from nicegui import ui; ui.label('🎉 NiceGUI 运行中!'); ui.button('点我', on_click=lambda: ui.notify('成功!')); ui.run()"