使用 Vue 2 和 Electron 的应用程序示例

文章列表

仅供参考

以下是文件结构示例以及所需文件：

your-app/
├── public/
│   ├── index.html
├── src/
│   ├── main/
│   │   ├── background.js
│   ├── renderer/
│   │   ├── App.vue
│   │   ├── main.js
│   ├── App.vue
│   ├── main.js
├── package.json

public/index.html: 应用程序的入口 HTML 文件。
src/main/background.js: Electron 主进程，可以处理 Node.js API 和启动渲染器进程。
src/renderer/App.vue: 渲染器进程中的 Vue 组件。
src/renderer/main.js: 渲染器进程的入口文件。
src/App.vue: 应用程序的根 Vue 组件，同时也是主进程/渲染器进程的共享组件。
src/main.js: 入口文件，将主进程和渲染器进程连接起来的代码。
package.json: 应用程序的依赖项和脚本等信息。

当您完成这些文件的设置后，请使用以下命令来安装必要的依赖项：

npm install# 或者使用 yarn
yarn

public/index.html
这是应用程序的入口 HTML 文件，它是在 Electron 窗口中显示的第一个内容。您可以在其中添加 <head> 和 <body> 标记，并将 CSS 和 JavaScript 文件链接到该页面。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Your App</title></head><body><div id="app"></div><!-- 导入渲染器进程打包后的 JS 文件 --><script src="../dist/renderer.js"></script></body>
</html>

上面的示例中，在 <body> 标记中创建了一个空的 div 元素作为 Vue 应用程序挂载点，然后将 renderer.js 脚本导入该页面。

src/main/background.js
这是 Electron 应用程序的主进程文件。这个文件允许你使用 Node.js API 来创建窗口、处理系统事件或与其他进程交互。

以下是一个简单的示例，创建了一个窗口并加载 index.html 文件：

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')let mainWindowfunction createWindow() {mainWindow = new BrowserWindow({ width: 800, height: 600 })mainWindow.loadURL(url.format({pathname: path.join(__dirname, '../../public/index.html'),protocol: 'file',slashes: true}))mainWindow.on('closed', function () {mainWindow = null})
}app.on('ready', createWindow)app.on('window-all-closed', function () {if (process.platform !== 'darwin') {app.quit()}
})app.on('activate', function () {if (mainWindow === null) {createWindow()}
})

在上面的示例中，我们使用了 Electron 的 BrowserWindow 类来创建一个窗口，并在应用程序准备就绪时加载 index.html 文件。同时，我们还添加了一些事件监听器来处理窗口关闭和激活事件。

src/renderer/App.vue
这是渲染器进程中的一个 Vue 组件。您可以在其中编写任何您想要的 Vue 模板、计算属性或方法等。

以下是一个基本示例：

<template><div><h1>Welcome to Your App!</h1><p>Current time: {{ currentTime }}</p></div>
</template><script>
export default {data() {return {currentTime: new Date().toLocaleTimeString()}},created() {setInterval(() => {this.currentTime = new Date().toLocaleTimeString()}, 1000)}
}
</script><style>
h1 {color: blue;
}
</style>

上面的示例中，在模板中添加了一个标题和一条显示当前时间的信息。组件的 data 选项中包含了一个名为 currentTime 的属性，它将会被实时更新以反映最新的时间。此外，我们还用样式对标题进行了着色。

src/renderer/main.js
这是渲染器进程的入口文件。它使用 Vue 来创建一个根实例，并将其挂载到任意 HTML 元素上。

以下是一个简单的示例：

import Vue from 'vue'
import App from './App.vue'new Vue({render: h => h(App)
}).$mount('#app')

在上面的示例中，我们使用了 Vue 构造函数来创建一个根实例。然后，我们通过传递引入的 App 组件来设置根实例的 render 选项。最后，我们使用 $mount 方法将根实例挂载到 HTML 中具有 id="app" 的元素上。

src/App.vue
这是应用程序的根 Vue 组件。它可以被主进程和渲染器进程同时使用。

以下是一个基本示例：

<template><div id="app"><h1>Welcome to Your App!</h1></div>
</template><script>
export default {name: 'App'
}
</script>

在上面的示例中，在模板中添加了一个标题。此外，我们还设置了组件的名称为 App，以便在其他地方重复使用。

src/main.js
这是应用程序的入口文件。它用于连接主进程和渲染器进程，并启动整个 Electron 应用程序。

以下是一个基本示例：

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')let mainWindowfunction createWindow() {mainWindow = new BrowserWindow({ width: 800, height: 600 })mainWindow.loadURL(url.format({pathname: path.join(__dirname, '../public/index.html'),protocol: 'file',slashes: true}))mainWindow.on('closed', function () {mainWindow = null})
}app.on('ready', createWindow)app.on('window-all-closed', function () {if (process.platform !== 'darwin') {app.quit()}
})app.on('activate', function () {if (mainWindow === null) {createWindow()}
})

使用 Vue 2 和 Electron 的应用程序示例