返回

Vue开发Electron桌面应用之基础配置与Electron API封装

前端

导言

在上一篇文章《什么是Electron，Vue如何应用Electron中》，我们已经对Electron进行了一些基本了解，并对在Vue配置Electron的一些基本操作进行了概述。现在，我们将进入正式的项目阶段，逐步探究Vue开发Electron桌面应用的奥秘。首先，让我们从Vue端基础配置和Electron API封装开始，为后续的开发奠定坚实基础。

Vue端基础配置

1. 安装Electron

在开始之前，我们需要先安装Electron，这是一个跨平台的桌面应用程序开发框架。你可以从Electron官方网站下载并安装适用于你操作系统的版本。

2. 创建Vue项目

接下来，我们需要创建一个Vue项目。你可以使用Vue CLI工具来快速创建一个项目。在终端中运行以下命令：

vue create electron-app

3. 安装Electron Builder

Electron Builder是一个工具，可以帮助我们轻松地将Vue项目打包成一个独立的桌面应用程序。在项目根目录中运行以下命令安装Electron Builder：

npm install electron-builder --save-dev

4. 配置Vue项目

在Vue项目的根目录下，找到package.json文件。我们需要在这个文件中添加一些配置。首先，我们需要添加一个main字段，指定应用程序的主入口文件。我们将使用src/main.js作为主入口文件。其次，我们需要添加一个build字段，指定Electron Builder的配置。我们将使用默认的配置即可。package.json文件的最终内容如下：

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "A Vue-powered Electron application.",
  "main": "src/main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "dependencies": {
    "electron": "^19.0.0",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "electron-builder": "^23.0.0"
  },
  "build": {
    "appId": "com.example.electron-app",
    "productName": "Electron App",
    "copyright": "Copyright © 2023 Example Corporation",
    "mac": {
      "category": "public.app-category.developer-tools"
    }
  }
}

5. 创建主入口文件

接下来，我们需要在src目录下创建一个名为main.js的文件，作为应用程序的主入口文件。在这个文件中，我们将初始化Electron应用程序，并创建一个窗口。

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')

  win.on('closed', () => {
    app.quit()
  })
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

ipcMain.handle('get-data', async (event, arg) => {
  return 'Hello, Electron!'
})

6. 创建窗口

在main.js文件中，我们创建了一个窗口，并加载了index.html文件。index.html文件是应用程序的用户界面，我们可以在这里编写HTML、CSS和JavaScript代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
  </head>
  <body>
    <h1>Hello, Electron!</h1>
    <button id="btn-get-data">Get Data</button>

    <script>
      const { ipcRenderer } = require('electron')

      document.getElementById('btn-get-data').addEventListener('click', () => {
        ipcRenderer.send('get-data')
      })

      ipcRenderer.on('get-data-reply', (event, arg) => {
        console.log(arg)
      })
    </script>
  </body>
</html>

Electron API封装

在Vue项目中，我们可以使用Electron API来访问Electron的各种功能。为了方便使用，我们可以将Electron API进行封装，以便在Vue组件中更轻松地使用。

1. 创建Electron API封装模块

在src目录下，创建一个名为electron-api.js的文件，作为Electron API封装模块。在这个文件中，我们可以将Electron API进行封装，并导出供Vue组件使用。

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

const getWindow = () => {
  return BrowserWindow.getFocusedWindow()
}

const showOpenDialog = (options) => {
  return BrowserWindow.getFocusedWindow().showOpenDialog(options)
}

const showSaveDialog = (options) => {
  return BrowserWindow.getFocusedWindow().showSaveDialog(options)
}

module.exports = {
  getWindow,
  showOpenDialog,
  showSaveDialog
}

2. 在Vue组件中使用Electron API封装模块

在Vue组件中，我们可以使用import语句导入Electron API封装模块，然后就可以使用模块中的方法了。例如，以下代码展示了如何在Vue组件中使用getWindow方法获取当前窗口：

import { getWindow } from '../electron-api'

export default {
  mounted() {
    const window = getWindow()
    console.log(window)
  }
}

结语

通过对Vue端基础配置和Electron API封装的深入探索，我们为后续的Vue开发Electron桌面应用奠定了坚实的基础。在接下来的文章中，我们将继续深入探讨Vue和Electron的结合，逐步构建出一个功能强大的跨平台桌面应用程序。