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

最新推荐文章于 2024-07-19 17:48:20 发布

li.siyuan

最新推荐文章于 2024-07-19 17:48:20 发布

阅读量434

点赞数

文章标签： vue.js electron javascript

本文链接：https://blog.csdn.net/qq_40602449/article/details/130244400

版权

使用 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 mainWindow

function 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 mainWindow

function 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()
  }
})