Electron + Vue 开发桌面应用

Friday, May 1, 2020

Electron是什么

  1. Electron 基于 ChromiumNode.js
  2. 可以使用 HTML,CSS 和 JavaScript 构建应用。
  3. Electron 兼容 Mac、Windows 和 Linux,可以构建出三个平台的应用程序。

需要做的工作

Electron 只包含 Chromium 系统API,并不提供集成 Vue 的功能。其实,只需要将 Vue 编译后的代码以 Electron 规定的结构组织,就可以使用 Vue 写桌面应用了~

electron-vue

electron-vue 类似于 Vue 脚手架,只需要在规定的文件夹里写代码就行,使用中的问题:

  • 感觉脚手架作者不怎么维护。
  • Vue 和其他依赖比较旧,直接改版本出不出问题不好说。
  • 如果在现有的 Vue 项目中引入 Electron,还得来回拷贝,报错改错。

vue-cli-plugin-electron-builder

vue-cli-plugin-electron-builder 相对于 electron-vue 灵活了许多,更有在 Vue 项目中集成 Electron 的感觉,因此这篇博客主要说明 vue-cli-plugin-electron-builder 的使用。这里列出几个个人认为的优点:

  • 目录结构基本按照 Vue 脚手架的结构。
  • 非侵入式,依赖版本的管理与 一般的 Vue 应用管理相同。
  • Vue CLI 插件的形式安装,命令统一使用 vue-cli-serviceVue CLI 插件

使用 vue-cli-plugin-electron-builder

  1. 创建一个 Vue项目,参考这里

  2. 引入依赖:

    yarn add -D electron electron-builder vue-cli-plugin-electron-builder
    

    electron-builder 是将项目打包成各个平台的工具。

  3. 添加运行脚本:

    "scripts": {
      "electron:serve": "vue-cli-service electron:serve",
      "electron:build": "vue-cli-service electron:build"
    }
    
  4. 创建 入口文件,相当于 Electron 项目中的 main.js

    // src/background.js
       
    import { app, protocol, BrowserWindow } from 'electron';
    import {
      createProtocol,
      installVueDevtools,
    } from 'vue-cli-plugin-electron-builder/lib';
       
    
    const isDevelopment = process.env.NODE_ENV !== 'production';
       
    // Keep a global reference of the window object, if you don't, the window will
    // be closed automatically when the JavaScript object is garbage collected.
    let win;
       
    // Scheme must be registered before the app is ready
    protocol.registerSchemesAsPrivileged([{
      scheme: 'app',
      privileges: {
        secure: true,
        standard: true,
      },
    }]);
       
    function createWindow() {
      // Create the browser window.
      win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true,
        },
      });
       
      if (process.env.WEBPACK_DEV_SERVER_URL) {
        // Load the url of the dev server if in development mode
        win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
        if (!process.env.IS_TEST) win.webContents.openDevTools();
      } else {
        createProtocol('app');
        // Load the index.html when not in development
        win.loadURL('app://./index.html');
      }
       
      win.on('closed', () => {
        win = null;
      });
    }
       
    // Quit when all windows are closed.
    app.on('window-all-closed', () => {
      // On macOS it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
      if (process.platform !== 'darwin') {
        app.quit();
      }
    });
       
    app.on('activate', () => {
      // On macOS it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (win === null) {
        createWindow();
      }
    });
       
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.on('ready', async () => {
      if (isDevelopment && !process.env.IS_TEST) {
        // Install Vue Devtools
        try {
          await installVueDevtools();
        } catch (e) {
          console.error('Vue Devtools failed to install:', e.toString());
        }
      }
      createWindow();
    });
       
    // Exit cleanly on request from parent process in development mode.
    if (isDevelopment) {
      if (process.platform === 'win32') {
        process.on('message', (data) => {
          if (data === 'graceful-exit') {
            app.quit();
          }
        });
      } else {
        process.on('SIGTERM', () => {
          app.quit();
        });
      }
    }
       
    

    记得修改 package.json

    "main": "background.js"
    
  5. 运行:

    yarn electron:serve
    
前端VueElectron

Java SPI

Java 设计模式:简单工厂模式-工厂模式-抽象工厂模式