Vue使用electron生成桌面应用过程详解

1. 概述

Vue.js是一个流行的JavaScript框架，用于构建Web应用程序。而Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的工具包。将Vue.js与Electron结合使用，可以快速而简单地构建更为强大的桌面应用程序。

本文将介绍如何使用Vue.js和Electron一起构建跨平台的桌面应用程序，我们将从准备环境开始，一步步地介绍如何使用Vue.js和Electron构建桌面应用程序。并给出两个示例说明。

2. 准备工作

在开始之前，确保已经安装了Node.js和Vue CLI。

# 安装Node.js
$ sudo apt-get install nodejs

# 安装Vue CLI
$ npm install -g @vue/cli

3. 创建Vue.js项目

我们首先使用Vue CLI创建一个Vue.js项目。

$ vue create my-project

该命令将创建名为“my-project”的项目并安装Vue.js。

4. 安装Electron

打开终端，切换到我们创建的项目目录：

$ cd my-project

运行以下命令安装Electron：

$ npm install --save-dev electron

注意：Electron包是作为开发依赖项安装的。

5. 配置Vue.js项目

为了将Vue.js和Electron一起使用，我们需要对Vue.js项目进行一些配置。

5.1 修改“package.json”文件

在项目的“package.json”文件中，我们需要添加如下内容：

{
  "name": "my-project",
  "version": "0.1.0",
  "main": "main.js", // 新增
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron": "electron ." // 新增
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "electron": "^13.1.7" // 新增
  }
}

在“scripts”中，我们添加了一个名为“electron”的命令。

5.2 创建Electron主进程

我们需要创建名为“main.js”的文件并将其放置在项目根目录中。该文件是Electron的主进程，相当于Web应用程序的后端代码。在该文件中，我们将使用Electron的API对桌面应用程序进行管理。

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

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

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

  // 打开开发者工具
  win.webContents.openDevTools()
}

// 当Electron初始化完成时执行
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // 在macOS中，当单击Dock图标并且没有其他窗口打开时，通常会在应用程序中重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 当所有窗口都关闭时退出。
app.on('window-all-closed', function () {
  // 在macOS上，应用程序及其菜单栏通常保持活动状态，直到用户使用Cmd + Q显式退出为止
  if (process.platform !== 'darwin') app.quit()
})

5.3 修改Vue.js配置文件

修改项目中的“vue.config.js”文件，将Vue.js的输出目录设置为“dist”：

module.exports = {
  outputDir: 'dist'
}

6. 运行Electron应用程序

现在我们可以通过在终端中运行以下命令启动Electron应用程序：

$ npm run electron

该命令将启动Electron，并打开一个窗口，该窗口将显示我们使用Vue.js创建的应用程序。

7. 示例说明

7.1 示例一：使用Electron打印PDF

在Vue.js应用程序中，我们可以使用Electron的API轻松地将页面导出为PDF文档。以下代码演示如何使用Electron打印PDF：

Vue.js组件

<template>
  <div>
    <button @click="printPDF">打印为PDF</button>
  </div>
</template>

<script>
export default {
  methods: {
    printPDF () {
      // 使用Electron的API打印PDF
      window.require('electron').remote.getCurrentWebContents().printToPDF({}, (error, data) => {
        if (error) throw error
        const { dialog } = window.require('electron').remote
        dialog.showSaveDialog({
          filters: [{ name: 'PDF', extensions: ['pdf'] }]
        }).then(result => {
          if (!result.canceled) {
            const fs = window.require('fs')
            fs.writeFile(result.filePath, data, (error) => {
              if (error) throw error
            })
          }
        })
      })
    }
  }
}
</script>

Electron主进程

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

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

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

  // 打开开发者工具
  win.webContents.openDevTools()

  // 监听通过IPC渲染进程发送的事件
  ipcMain.on('print-to-pdf', (event) => {
    // 使用Electron的API打印PDF
    win.webContents.printToPDF({}, (error, data) => {
      if (error) throw error
      event.sender.send('wrote-pdf', data)
    })
  })
}

// 当Electron初始化完成时执行
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // 在macOS中，当单击Dock图标并且没有其他窗口打开时，通常会在应用程序中重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 当所有窗口都关闭时退出。
app.on('window-all-closed', function () {
  // 在macOS上，应用程序及其菜单栏通常保持活动状态，直到用户使用Cmd + Q显式退出为止
  if (process.platform !== 'darwin') app.quit()
})

7.2 示例二：使用Electron菜单

在Electron应用程序中，我们可以轻松创建自定义菜单，类似于传统的桌面应用程序。以下代码演示如何使用Electron创建自定义菜单：

Electron主进程

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

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

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

  // 打开开发者工具
  win.webContents.openDevTools()

  // 创建并设置菜单栏
  const template = [
    {
      label: '文件',
      submenu: [
        {
          label: '新建',
          accelerator: 'CmdOrCtrl+N',
          click () { console.log('新建文件') }
        },
        {
          label: '打开',
          accelerator: 'CmdOrCtrl+O',
          click () { console.log('打开文件') }
        },
        {
          label: '保存',
          accelerator: 'CmdOrCtrl+S',
          click () { console.log('保存文件') }
        }
      ]
    }
  ]
  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

// 当Electron初始化完成时执行
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // 在macOS中，当单击Dock图标并且没有其他窗口打开时，通常会在应用程序中重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 当所有窗口都关闭时退出。
app.on('window-all-closed', function () {
  // 在macOS上，应用程序及其菜单栏通常保持活动状态，直到用户使用Cmd + Q显式退出为止
  if (process.platform !== 'darwin') app.quit()
})

8. 总结

本文介绍了如何使用Vue.js和Electron一起构建桌面应用程序，我们从准备环境开始，一步步地介绍了如何使用Vue.js和Electron构建桌面应用程序，并给出了两个示例说明。在使用Vue.js和Electron一起构建跨平台的桌面应用程序时，需要了解Electron的API，并合理地使用这些API以实现所需的功能。