Although B/S is currently the mainstream of development, C/S still has great market demand. Restricted by browser sandbox restrictions, web applications cannot meet the usage requirements in certain scenarios, and desktop applications can read and write local files, call more system resources, plus the low cost and high efficiency advantages of web development This cross-platform approach is becoming more and more popular among developers.

Electron is a cross-platform development framework based on Chromium and Node.js, using HTML, CSS and JavaScript to build cross-platform applications, compatible with Mac, Windows and Linux. At present, Electron has created a large number of applications including VScode and Atom.

Environment construction

Before creating Electron cross-platform applications, you need to install some common tools, such as Node, vue, and Electron.

Install Node

Go to the download page of Node's official website http://nodejs.cn/download/, then download the corresponding version. It is recommended to download the stable version when downloading. If installing Node using Homebrew, it is recommended to change the npm warehouse image to Taobao image during installation, as shown below.

npm config set registry http://registry.npm.taobao.org/
 or
npm install -g cnpm --registry=https://registry.npm.taobao.org

Install/upgrade vue-cli

First execute the following command to confirm the locally installed vue-cli version.

vue -V

If it is not installed or is not the latest version, you can execute the following command to install/upgrade.

npm install @vue/cli -g

Install Electron

Use the following command to install the Electron plugin.

npm install -g electron
Or
cnpm install -g electron

In order to verify whether the installation is successful, you can use the following command.

electron --version

Create a running project

Electron official improved a simple project, you can execute the following command to clone the project to the local.

git clone https://github.com/electron/electron-quick-start

Then execute the following command in the project to start the project.

cd electron-quick-start
npm install 
npm start

The effect of the project after startup is as shown below.

In addition, we can use the vue-cli scaffolding tool to create projects.

vue init simulatedgreg/electron-vue

Then select the options step by step according to the following prompt to create a project, as shown below.

Then, use the npm install command to install the required packages required by the project.

Project Directory

The Electron project structure created using the electron-vue template is shown below.

The directory structure and meaning are as follows:

Electron
 ├──atom-Electron source code
 | ├── app-System entry code
 | ├── browser-Contains the main window, UI and all other things related to the main process, it will tell the rendering process how to manage the page
 | ├── lib-JavaScript part of the initialization code of the main process
 | | ├── ui-Implementation of the UI part on different platforms
 | | | ├── cocoa-Cocoa part of the source code
 | | | ├── gtk-GTK+ part of the source code
 | | | └── win-Windows GUI part of the source code
 | ├── default_app-The page displayed by default when Electron starts without specifying an app
 | | ├── api-Implementation of the main process API
 | | | └── lib-Javascript part of the API implementation code
 | | ├── net-network related code
 | | ├── mac-Objective-C code related to Mac
 | | └── resources-icons, platform related files, etc.
 | ├── renderer-code running in the rendering process
 | | ├── lib-JavaScript part of the initialization code of the rendering process
 | | └── api-Implementation of Rendering Process API
 | | └── lib-Javascript part of the API implementation code
 | └── common-The code used by the main process and the rendering process at the same time, including some event loops used to node
 | | Utility functions and codes used when integrated into Chromium's event loop
 | ├── lib-Javascript initialization code used by both the main process and the rendering process
 | └── api-API implementation used by the main process and the rendering process as well as the infrastructure of Electron's built-in modules
 | └── lib-Javascript part of the API implementation code
 ├── chromium_src-code copied from Chromium project
 ├── docs-English version of the document
 ├── docs-translations-translation of documents in various languages
 ├── spec-automated testing
 ├── atom.gyp-Electron construction rules
 └── common.gypi-Compile settings and build rules for other components such as `node` and `breakpad`

In normal development, the src, package.json and appveyor.yml directories need to be focused on,