vue+Electron开发桌面应用

1. 环境准备

确保已经安装了 Node.js 和 npm（Node.js 包管理器），可以通过以下命令检查安装情况：

node -v
npm -v

2. 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目。如果还没有安装 Vue CLI，可以使用以下命令进行安装：

npm install -g @vue/cli

创建一个新的 Vue 项目：

vue create electron-vue-demo
cd electron-vue-demo

3. 安装 Electron

在项目根目录下，安装 Electron：

npm install electron --save-dev

4. 配置 Electron

4.1 创建主进程文件

在项目根目录下创建一个 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,
            enableRemoteModule: true, // 如果你需要使用 remote 模块
            preload: path.join(__dirname, 'preload.js')
        }
    });

    // 加载 Vue 应用
    if (process.env.NODE_ENV === 'development') {
        // 开发环境下加载本地开发服务器
        win.loadURL('http://localhost:8080');
    } else {
        // 生产环境下加载打包后的文件
        win.loadFile(path.join(__dirname, 'dist/index.html'));
    }
    // 打开开发者工具
    win.webContents.openDevTools();
}
app.whenReady().then(() => {
    createWindow();
    app.on('activate', function () {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
});
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit();
});

4.2 创建预加载脚本

在项目根目录下创建一个 preload.js 文件，内容如下：

const { contextBridge, ipcRenderer } = require('electron');
// 暴露一些 API 给渲染进程
contextBridge.exposeInMainWorld('electronAPI', {
    sendMessage: (channel, data) => ipcRenderer.send(channel, data),
    receiveMessage: (channel, func) => ipcRenderer.on(channel, (event, ...args) => func(...args))
});

5. 配置 Vue 项目以支持 Electron

5.1 修改 package.json

在 package.json 中添加以下脚本：

{
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "electron:serve": "concurrently \"npm run serve\" \"wait-on http://localhost:8080 && electron .\"",
        "electron:build": "npm run build && electron-builder"
    },
    "main": "main.js",
    "build": {
        "appId": "com.example.electron-vue-demo",
        "productName": "Electron Vue Demo",
        "directories": {
            "output": "dist_electron"
        },
        "files": [
            "dist/**/*",
            "node_modules/**/*",
            "main.js",
            "preload.js"
        ],
        "win": {
            "target": [
                "nsis"
            ]
        },
        "mac": {
            "target": [
                "dmg"
            ]
        },
        "linux": {
            "target": [
                "AppImage"
            ]
        }
    }
}

这里使用了 concurrently 和 wait-on 来同时启动 Vue 开发服务器和 Electron，需要安装它们：

npm install concurrently wait-on --save-dev

同时，安装 electron-builder 用于打包应用：

npm install electron-builder --save-dev

6. 在 Vue 组件中使用 Electron API

在 src/components/HelloWorld.vue 组件中，添加以下代码来测试与 Electron 主进程的通信：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="sendMessageToMain">Send Message to Main</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  },
  methods: {
    sendMessageToMain() {
      window.electronAPI.sendMessage('message-from-renderer', 'Hello from renderer!');
    }
  },
  mounted() {
    window.electronAPI.receiveMessage('message-from-main', (message) => {
      console.log('Received message from main:', message);
    });
  }
};
</script>

在 main.js 中添加相应的事件处理代码：

const { app, BrowserWindow, ipcMain } = require('electron');
// ... 其他代码 ...

ipcMain.on('message-from-renderer', (event, message) => {
    console.log('Received message from renderer:', message);
    event.sender.send('message-from-main', 'Hello from main!');
});

7. 运行和打包应用

7.1 开发环境运行

在开发环境下，使用以下命令同时启动 Vue 开发服务器和 Electron：

npm run electron:serve

7.2 生产环境打包

在生产环境下，使用以下命令打包应用：

npm run electron:build

打包完成后，可以在 dist_electron 目录下找到生成的安装包。

注意事项

• 安全性： 在实际开发中，要注意 nodeIntegration 和 contextIsolation 的设置，以确保应用的安全性。
• 跨平台兼容性： 不同操作系统可能有不同的特性和要求，需要进行相应的测试和处理。