Vue+Electron轻松搭建桌面应用，引领开发新风潮

使用 Vue 和 Electron 构建桌面应用程序

前言

Electron 是一个强大的框架，可让开发者使用 Web 技术构建跨平台桌面应用程序。Vue.js 是一个流行的 JavaScript 框架，用于构建交互式且用户友好的 Web 界面。本文将引导你一步步使用 Vue 和 Electron 创建一个基本的桌面应用程序。

设置

1. 安装 Electron： 前往 Electron 官方网站下载对应系统的安装程序，并按照提示进行安装。
2. 创建 Vue 项目： 安装完成后，在终端或命令提示符中运行以下命令，创建一个新的 Vue 项目：

vue create my-electron-app

3. 安装 Electron 依赖项： 进入项目目录，在 package.json 中添加对 Electron 的依赖：

{
  "dependencies": {
    "electron": "^20.0.0"
  }
}

4. 安装 Electron 依赖项：

npm install

编写 Electron 代码

5. 编写主进程代码： 在 src/main.js 中编写 Electron 主进程代码：

const { app, BrowserWindow, Menu } = require('electron')

app.on('ready', () => {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadFile('index.html')

  const menuTemplate = [
    {
      label: '文件',
      submenu: [
        { role: 'quit' }
      ]
    },
    {
      label: '编辑',
      submenu: [
        { role: 'undo' },
        { role: 'redo' },
        { type: 'separator' },
        { role: 'cut' },
        { role: 'copy' },
        { role: 'paste' }
      ]
    }
  ]

  Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplate))
})

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    const win = new BrowserWindow({ width: 800, height: 600 })
    win.loadFile('index.html')
  }
})

6. 编写渲染进程代码： 在 src/renderer.js 中编写 Electron 渲染进程代码：

const { remote } = require('electron')

const app = remote.app
const BrowserWindow = remote.BrowserWindow

const win = BrowserWindow.getFocusedWindow()
const menuTemplate = [
  {
    label: '文件',
    submenu: [
      { role: 'quit' }
    ]
  },
  {
    label: '编辑',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' }
    ]
  }
]

Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplate))

编写 Vue 组件

7. 编写 Vue 组件： 在 public/index.html 中编写 Vue 组件代码：

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <button @click="show">Show message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Electron!'
    }
  },
  methods: {
    show() {
      alert(this.msg)
    }
  }
}
</script>

打包和部署

8. 安装 webpack-electron-builder： 添加对 webpack-electron-builder 的依赖：

{
  "dependencies": {
    "webpack-electron-builder": "^20.0.0"
  }
}

9. 安装 webpack-electron-builder：

npm install

10. 配置 webpack-electron-builder： 在 package.json 中添加 webpack-electron-builder 配置：

{
  "build": {
    "appId": "my-electron-app",
    "productName": "My Electron App",
    "copyright": "Copyright © 2023",
    "mac": {
      "category": "public.app-category.developer-tools"
    },
    "win": {
      "icon": "public/icon.ico"
    },
    "files": [
      "dist/**/*"
    ]
  }
}

11. 打包 Electron 应用： 运行 webpack-electron-builder 打包 Electron 应用：

npx webpack-electron-builder build

结论

恭喜！你已经成功使用 Vue 和 Electron 构建了一个基本的桌面应用程序。Electron 和 Vue 的强大功能使你能够轻松创建跨平台应用程序，具有原生应用程序的外观和感觉。通过不断探索，你可以利用 Electron 和 Vue 的高级功能来构建更复杂和令人印象深刻的应用程序。

常见问题解答

1. 如何自定义 Electron 应用的菜单栏？
   在 main.js 中使用 Menu.setApplicationMenu() 设置自定义菜单模板。
2. 如何从渲染进程访问 Electron 主进程 API？
   使用 remote 模块从渲染进程访问主进程 API。
3. 如何为 Electron 应用打包图标？
   在 package.json 的 build 配置中指定图标文件路径。
4. 如何发布 Electron 应用到应用程序商店？
   使用 webpack-electron-builder 的 build 命令，并遵循特定平台的商店指南。
5. 如何将 Electron 应用部署到多个平台？
   在 package.json 的 build 配置中指定不同的目标平台。