怎么使用vue和electron开发一个桌面应用

2023-07-05 18:45

短信预约 -IT技能 免费直播动态提醒

本文小编为大家详细介绍“怎么使用vue和electron开发一个桌面应用”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么使用vue和electron开发一个桌面应用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

1. 创建 Vue.js 项目

首先，我们需要创建一个 Vue.js 项目。使用命令行工具进入你想要创建项目的文件夹，并执行以下命令：

vue create my-electron-app 这将创建一个名为 "my-electron-app" 的 Vue.js 项目。你可以按照提示选择你喜欢的 preset。

2. 安装和配置 Electron

接下来，我们需要安装并配置 Electron。首先，使用 npm 安装 electron：

npm install --save-dev electron

然后，我们需要在项目的根目录下创建一个名为 "main.js" 的文件。这是 Electron 主进程的入口点。

在 "main.js" 文件中，我们需要编写以下代码：

const { app, BrowserWindow } = require('electron')function createWindow () {  // 创建一个窗口  const win = new BrowserWindow({    width: 800,    height: 600,    webPreferences: {      nodeIntegration: true,      contextIsolation: false,    },  })  // 加载 Vue.js 应用程序  win.loadURL('http://localhost:8080')}// 当 Electron 准备好创建窗口时调用 createWindow 函数app.whenReady().then(createWindow)

这段代码将创建一个 Electron 窗口，并加载本地运行的 Vue.js 应用程序。

最后，我们需要在 "package.json" 文件中添加以下代码：

"main": "main.js","scripts": {  "electron:serve": "electron .",  "electron:build": "electron-builder"}

3. 编写主进程代码

现在我们已经设置好了基本的项目结构，我们可以开始编写 Electron 主进程的代码。在 "main.js" 文件中，我们可以添加一些有用的功能，例如创建菜单栏和对话框。

const { app, BrowserWindow, Menu, dialog } = require('electron')const path = require('path')let mainWindowfunction createWindow () {  mainWindow = new BrowserWindow({    width: 800,    height: 600,    webPreferences: {      nodeIntegration: true,      contextIsolation: false,    },  })  // 加载 Vue.js 应用程序  mainWindow.loadURL('http://localhost:8080')  // 创建菜单栏  const menuTemplate = [    {      label: 'File',      submenu: [        {          label: 'Open File',          click:function ()           {           dialog.showOpenDialog({ properties: ['openFile'] }).then(result => {           if (!result.canceled) { // 处理打开文件的代码 } })           },           },           { label: 'Exit', role: 'quit', },           ],           }    const menu = Menu.buildFromTemplate(menuTemplate) Menu.setApplicationMenu(menu)// 当窗口关闭时销毁它     mainWindow.on('closed', function () { mainWindow = null }) }// 当 Electron 准备好创建窗口时调用 createWindow 函数     app.whenReady().then(createWindow)

这段代码将创建一个菜单栏，并添加一个 "Open File" 选项。当用户点击 "Open File" 时，将显示一个文件对话框，用户可以选择要打开的文件。这里使用了 Electron 中的对话框模块。你可以根据你的需求进行修改。

4. 编写渲染进程代码

现在我们已经完成了主进程的代码，我们可以开始编写 Vue.js 应用程序的渲染进程代码。在 "class="lazy" data-src" 文件夹下创建一个名为 "App.vue" 的文件，并添加以下代码：

<template>  <div class="container">    <h2>{{ message }}</h2>    <button @click="openFile">Open File</button>  </div></template><script>const { ipcRenderer } = require('electron')export default {  name: 'App',  data() {    return {      message: 'Welcome to my Electron app!',    }  },  methods: {    openFile() {      ipcRenderer.send('open-file')    }  }}</script><style>.container {  text-align: center;  margin-top: 40px;}</style>

这段代码将显示一个包含 "Welcome to my Electron app!" 消息和 "Open File" 按钮的页面。当用户点击 "Open File" 按钮时，将发送一个事件到主进程，告诉它打开文件对话框。

我们还需要在 Vue.js 应用程序中注册一个事件监听器，以便在主进程发送事件时接收它。在 "main.js" 文件中添加以下代码：

const { app, BrowserWindow, Menu, dialog, ipcMain } = require('electron')const path = require('path')let mainWindowfunction createWindow () {  mainWindow = new BrowserWindow({    width: 800,    height: 600,    webPreferences: {      nodeIntegration: true,      contextIsolation: false,    },  })  // 加载 Vue.js 应用程序  mainWindow.loadURL('http://localhost:8080')  // 创建菜单栏  const menuTemplate = [    {      label: 'File',      submenu: [        {          label: 'Open File',          click: function () {            dialog.showOpenDialog({              properties: ['openFile']            }).then(result => {              if (!result.canceled) {                // 处理打开文件的代码              }            })          },        },        {          label: 'Exit',          role: 'quit',        },      ],    },  ]  const menu = Menu.buildFromTemplate(menuTemplate)  Menu.setApplicationMenu(menu)    // 当窗口关闭时销毁它     mainWindow.on('closed', function () { mainWindow = null })// 监听 "open-file" 事件，打开文件对话框 ipcMain.on('open-file', (event, arg) => { dialog.showOpenDialog({properties: ['openFile'] }).then(result => { if (!result.canceled) { // 处理打开文件的代码 } }) })}// 当 Electron 准备好创建窗口时调用 createWindow 函数 app.whenReady().then(createWindow)

这段代码使用 "ipcMain" 模块注册一个事件监听器，以便在主进程接收到 "open-file" 事件时打开文件对话框。