preface

I’ve always been interested in PC desktop applications, and I can’t play C++, but it’s cool to think that you can customize your own PC desktop applications just by using front-end technology. Why wait

What is the Electron

A cross-platform desktop application compatible with Windows, Mac, and Linux operating systems can be understood as a shell that covers the browser, provides a browser +Node.js+ framework API running environment, can open multiple static HTML scripts (or vue projects)

  • The main process and the rendering process

The main process is an application portal that provides node.js and Native API (framework) environments. Render process provides the browser environment, responsible for loading pages, complete business logic, can open multiple render process in the main process at the same time;

advantages

  • Cross-platform development
  • Low access cost for old projects
  • You do not need to deploy a Web static server
  • Platform unified use of Chromium kernel, no compatibility problems

disadvantages

  • Large memory footprint empty content packaging, volume is not small.
  • Things that interact worse than native (C++) are still H5

Environment configuration

  • Installation Node. Js

Go to the official website to install LTS version (for example, 12.18.3)

  • Set Taobao Mirror
npm config set registry http://registry.npm.taobao.org/
Copy the code
yarn config set registry http://registry.npm.taobao.org/
Copy the code
  • Install @ vue/cli

Quick learning

Sample project warehouse $# cloning git clone https://github.com/electron/electron-quick-start # $CD electron - quick to enter the warehouse - start # installation and operation of $ npm install && npm startCopy the code
/ / (note that the download for a long time for the first time, if you don't want to wait, also can modify the source address of the package solution) NPM config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/Copy the code

The preview effect is as follows. The internal page is a simple HTML page. In the same way, you can put any PC HTML page written in advance, such as React and Vue pages, but it is not elegant to throw directly into the page.

How to plug into Electron easily and happily in a Vue project

Vue Scaffolding 3.0 plugin vue-cli-plugin-electric-Builder helps vue scaffolding introduce the electron dependency directly and generate related files and configurations.

  • Look at the renderings first

As shown, a basic VUE project opens

  • 1. Install the plug-in

Execute the following commands in the VUE project folder to open the VUE scaffolding graphical interface

vue ui
Copy the code

Enter the plug-in

** Note: after the installation is complete, you must click the “Install Complete” button, otherwise the project may have problems **

Changes to scaffolding are as follows:

Handle the main process logic in the main process entry background.js file, including:

1. Open the default render process (window)

2. Communicate with the renderer process (window) and forward the message

3. Control the behavior of the rendering process (window)

4. Control the application lifecycle

5. Generate application menus and shortcut keys

6. Application updates online (juejin.cn/post/684490…

7. Initiate an HTTP request

8. Disconnection processing

Electron API documentation

Ready, execute the command and open the app

npm run electron:serve
Copy the code

Issues related to

For the browser kernel, you can view the browser kernel version in main Process

process.versions.chrome
Copy the code

How does the main process communicate with the renderer process (window)

Note: Notifications are also forwarded between renderers through the main process

How do you synchronize data between multiple renderers

Vuex-electron intercepts action and mutation submissions of state machine instances in all rendering processes (Windows) to synchronize data to the main process for management. Note that the execution environment in all action and mutation method blocks is The main process does not recommend direct communication and interaction between renderers (Windows) in the state machine API.

1. Install dependencies

Yarn install vuex-electron // or NPM install vuex-electronCopy the code

2. How do I use this plug-in

import Vue from "vue"
import Vuex from "vuex"

import { createPersistedState, createSharedMutations } from "vuex-electron"

Vue.use(Vuex)

export default new Vuex.Store({
  // ...
  plugins: [
    createPersistedState(),
    createSharedMutations()
  ],
  // ...
})
Copy the code

If packaging fails

If cannot move into final Location (or the file cannot be downloaded) is encountered when appen-Builder is packaged, please close the antivirus software

Online update

If you are interested, you can check out the online updates

Automated testing

If you are interested, you can learn about it

https://www.electronjs.org/docs/tutorial/using-selenium-and-webdriver
https://www.electronjs.org/docs/tutorial/automated-testing-with-a-custom-driver
Copy the code

END