用Electron封装Python命令行工具，打造跨平台GUI程序

2024-02-14 19:38:55

将 Python 命令行工具打包为跨平台 GUI 程序：Electron 和 Vue.js 指南

随着技术的不断进步，Python 凭借其易学性和强大功能赢得了广大开发人员的青睐。然而，Python 本身并不具备创建图形用户界面 (GUI) 的能力。

Electron 和 Vue.js 的作用

为了解决这个问题，我们可以借助 Electron 和 Vue.js 技术栈。Electron 是一个跨平台的桌面应用程序开发框架，允许使用 JavaScript、HTML 和 CSS 构建桌面应用程序。Vue.js 是一个渐进式 JavaScript 框架，简化了用户界面构建过程。

打造 Python GUI 程序

1. 创建 Electron 项目

使用 electron-vue init my-project 命令创建新项目。

2. 安装依赖项

运行 cd my-project && npm install 安装项目所需的依赖项。

3. 编写主进程脚本

在 main.js 文件中，创建 Electron 窗口并设置菜单。

4. 编写渲染进程脚本

在 index.html 文件中，使用 Vue.js 创建用户界面，包括按钮和文件输入控件。

5. 打包应用程序

安装 pyinstaller 并使用 pyinstaller --onefile --windowed main.py 命令将应用程序打包为可执行文件。

示例代码

主进程脚本（main.js）

const { app, BrowserWindow, Menu, dialog } = require('electron')

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({ width: 800, height: 600 })

  // 加载index.html文件
  win.loadFile('index.html')

  // 创建菜单
  const menu = Menu.buildFromTemplate([
    // ... 菜单项
  ])

  // 设置菜单
  Menu.setApplicationMenu(menu)

  // ... 其余代码
}

// ... 其余代码

渲染进程脚本（index.html）

<div id="app">
  <button @click="openFile">打开文件</button>
  <button @click="saveFile">保存文件</button>
  <button @click="saveFileAs">另存为</button>
  <input type="file" ref="fileInput" style="display: none">
</div>

<script>
import Vue from 'vue'

new Vue({
  el: '#app',
  methods: {
    openFile() {
      this.$refs.fileInput.click()
    },
    saveFile() {
      // 保存文件
    },
    saveFileAs() {
      // 另存为
    }
  }
})
</script>