分分钟构建 Electron 桌面应用程序

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 21 天，点击查看活动详情

在本文中，将介绍使用 Vue.js 和 Electron 构建跨平台桌面应用程序的基本步骤。我们将使用一个简单的示例来演示如何使用这两个工具来创建一个基本的桌面应用程序。

步骤 1：安装 Vue CLI

首先，我们需要安装 Vue CLI。Vue CLI 是一个命令行工具，可帮助我们快速创建 Vue.js 应用程序。我们可以使用以下命令来安装 Vue CLI：

npm install -g @vue/cli

步骤 2：创建一个新的 Vue.js 应用程序

接下来，我们将使用 Vue CLI 创建一个新的 Vue.js 应用程序。我们可以使用以下命令来创建一个新的 Vue.js 应用程序：

vue create my-app

步骤 3：安装 Electron

现在，我们需要安装 Electron。我们可以使用以下命令来安装 Electron：

npm install electron --save-dev

步骤 4：创建一个 Electron 入口文件

接下来，我们需要创建一个 Electron 入口文件。我们可以在项目根目录下创建一个新的文件夹，并在该文件夹中创建一个新的文件来存储我们的入口文件。我们可以使用以下命令来创建这个文件夹和文件：

mkdir electron
touch electron/main.js

然后，我们需要在 main.js 文件中添加以下代码：

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

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

  // 加载应用的 index.html
  win.loadFile('dist/index.html')
}

app.whenReady().then(createWindow)

步骤 5：配置 package.json 文件

现在，我们需要修改 package.json 文件以在应用程序中使用 Electron。我们需要在 package.json 文件中添加以下代码：

{
  "main": "electron/main.js",
  "scripts": {
    "electron:serve": "vue-cli-service electron:serve",
    "electron:build": "vue-cli-service electron:build"
  },
  "build": {
    "productName": "My App",
    "appId": "com.myapp",
    "directories": {
      "output": "dist_electron"
    }
  },
  "dependencies": {
    "electron": "^13.2.1"
  }
}

步骤 6：运行应用程序

现在，我们可以使用以下命令来运行我们的应用程序：

npm run electron:serve

这将启动我们的应用程序，并在 Electron 窗口中显示我们的 Vue.js 应用程序。我们现在已经成功地使用 Vue.js 和 Electron 构建了一个跨平台桌面应用程序！

步骤 7：构建应用程序

最后，如果我们想要构建我们的应用程序以便在生产环境中使用，我们可以使用以下命令来构建我们的应用程序：

npm run electron:build

这将生成一个可执行文件，该文件可在 Windows、macOS 和 Linux 上运行。 本文介绍了使用 Vue.js 和 Electron 构建跨平台桌面应用程序的基本步骤。我们的示例应用程序只是一个简单的演示，但是使用这些工具，我们可以创建更复杂和功能丰富的桌面应用程序。如果您正在寻找一种快速构建跨平台桌面应用程序的方法，那么 Vue.js 和 Electron 是一个很好的选择。