vue+electron

作者：灭世杀发布日期:2025-05-31 浏览:79

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

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

  // 加载 Vue 应用的 index.html 文件
  win.loadFile('dist/index.html');
}

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 - 预加载脚本
const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron
});

// package.json - 项目配置文件
{
  "name": "vue-electron-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:build": "vue-cli-service build && electron ."
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "electron": "^11.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }
}

// src/main.js - Vue 应用入口文件
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

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

// public/index.html - Vue 应用的 HTML 文件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue + Electron</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

// src/App.vue - Vue 组件文件
<template>
  <div id="app">
    <h1>Hello Vue + Electron!</h1>
    <p>Node.js version: {{ nodeVersion }}</p>
    <p>Chrome version: {{ chromeVersion }}</p>
    <p>Electron version: {{ electronVersion }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nodeVersion: '',
      chromeVersion: '',
      electronVersion: ''
    };
  },
  created() {
    this.nodeVersion = window.versions.node();
    this.chromeVersion = window.versions.chrome();
    this.electronVersion = window.versions.electron();
  }
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

main.js：这是 Electron 的主进程文件，负责创建浏览器窗口并加载 Vue 应用的 index.html 文件。它还配置了 WebPreferences 以启用 Node.js 集成和上下文隔离。
preload.js：预加载脚本，用于在渲染进程中暴露一些 API（如版本信息）给前端代码使用。
package.json：项目的配置文件，包含依赖项和构建脚本。特别注意 electron:build 脚本，它会先构建 Vue 应用，然后启动 Electron 应用。
src/main.js：Vue 应用的入口文件，初始化 Vue 实例并挂载到 #app 元素上。
public/index.html：Vue 应用的 HTML 文件，包含基本的 HTML 结构。
src/App.vue：Vue 组件文件，展示了如何通过预加载脚本获取 Electron、Node.js 和 Chrome 的版本信息，并将其显示在页面上。

上一篇：vue 引入图片

下一篇：vue点击子元素不触发父元素