electron vue2

作者：花小泽ノ发布日期:2026-06-30 浏览:44

// main.js (Electron 主进程文件)
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, 'preload.js')
    }
  });

  win.loadURL('http://localhost:8080'); // 加载 Vue 应用的 URL
}

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

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

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

// preload.js (预加载脚本)
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = text;
  };

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type]);
  }
});

<!-- index.html (Vue 应用入口文件) -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Electron Vue2 App</title>
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

// src/main.js (Vue 应用主文件)
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

// package.json (项目配置文件)
{
  "name": "electron-vue2-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:serve": "vue-cli-service electron:serve",
    "electron:build": "vue-cli-service electron:build"
  },
  "dependencies": {
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "electron": "^13.1.7",
    "vue-template-compiler": "^2.6.14"
  }
}

解释说明

main.js: 这是 Electron 的主进程文件，负责创建和管理浏览器窗口。它加载了 Vue 应用的 URL，并设置了窗口的基本属性。
preload.js: 预加载脚本允许你在渲染进程中访问 Node.js API 和 Electron API。这里简单地展示了如何获取并显示 Electron、Node.js 和 Chrome 的版本信息。
index.html: 这是 Vue 应用的入口 HTML 文件。它包含了一个 div 元素，Vue 将在这个元素中挂载应用。
src/main.js: 这是 Vue 应用的主文件，它实例化了一个 Vue 实例并将其挂载到 #app 元素上。
package.json: 包含了项目的依赖和脚本命令。electron:serve 和 electron:build 是用于启动和构建 Electron 应用的命令。

通过这些文件，你可以创建一个基于 Electron 和 Vue 2 的桌面应用程序。

上一篇：mqtt vue

下一篇：vue3获取div高度