在 Vue2 中使用 Vue-Electron

亲测可用

在 Vue2 中使用 Vue-Electron 需要安装 vue-cli-plugin-electron-builder 插件。

以下是具体步骤：

1. 全局安装 Vue CLI： npm install -g @vue/cli

2. 创建一个新的 Vue 项目: vue create my-project

3. 启动 vue ui

4. 添加 vue-cli-plugin-electron-builder 插件

5. 然后，会自动在 src 文件夹下创建两个文件 main.js 和 background.js。

6. 在 main.js 中，添加以下代码：

// 引入 electron 模块
const { app, BrowserWindow } = require('electron')

// 创建一个新窗口 
function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载 index.html 文件
  win.loadFile('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()
  }
})

6. 然后在 package.json 中添加以下命令：

{
  "scripts": {
    "electron:serve": "vue-cli-service electron:serve",
    "electron:build": "vue-cli-service electron:build",
  }
}

7. 最后，运行命令 npm run electron:serve 就可以启动你的 Electron 应用了。