electron+vue

// 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 应用的页面
  win.loadURL('http://localhost:8080'); // 假设 Vue 应用在开发模式下运行在 http://localhost:8080
}

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]);
  }
});

// package.json (项目根目录下的配置文件)
{
  "name": "electron-vue-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "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": {
    "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": "^12.0.0",
    "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');

// src/App.vue (Vue 组件)
<template>
  <div id="app">
    <h1>Hello Electron + Vue!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

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

解释说明

1. Electron 主进程 (main.js):

   • 使用 electron 模块创建一个浏览器窗口，并加载 Vue 应用。
   • webPreferences 中的 nodeIntegration 和 contextIsolation 设置是为了确保 Electron 和 Vue 可以正常通信。

2. 预加载脚本 (preload.js):

   • 在页面加载完成后，可以访问 process.versions 来获取 Electron、Node.js 和 Chrome 的版本信息，并将其显示在页面上。

3. package.json:

   • 包含了项目的依赖和脚本命令。electron:serve 和 electron:build 是用于启动和打包 Electron 应用的命令。

4. Vue 应用入口文件 (src/main.js):

   • 初始化 Vue 实例并挂载到 DOM 元素 #app 上。

5. Vue 组件 (src/App.vue):

   • 定义了一个简单的 Vue 组件，包含模板、脚本和样式。