1. The Electron is what

Borrow the screenshot from the official website, as aboveChinese document:www.electronjs.org/docs

Use Web technologies to write the UI, use the chrome kernel to run it, use NodeJS to manipulate the file system and make network requests, use NodeJS C++ Addon to call the operating system’s native API (Juejin. Cn/post / 684490…Electron has the main process and the render process

1.1 main process
  1. Electron The process that runs the package.json main script is called the master process
  2. There is only one main process per application
  3. Manage native GUI, typical Windows (BrowserWindow, Tray, Dock, Menu)
  4. Creating the Render process
  5. Control the application lifecycle (APP)
1.2 Rendering Process
  1. The process that presents the Web page is called the rendering process
  2. Apis provided by Node.js and Electron allow you to interact with the underlying system
  3. A Electron application can have multiple render processes

2. A simple Electron project

A simple project contains at least three files, package.json, main.js, and index.html. In addition to the project information, package.json contains the entry file main.js.

Create a window in main.js and load the index.html file. In real projects, we rarely initialize the original project directly. How is Electron bound to Vue

3.Electron + Vue

The Electron is used with Vue in two ways

3.1 Electron – vue

Initialize the project with the Electron vue:

vue init simulatedgreg/electron-vue electron-vue
Copy the code

After initializing the project directory, such as the screenshot, the directory structure is relatively clear, including template rendering, main process code, render process code, can be directly developed on the electron vue initialized code. However, this code relies on an older version of Electron. The upgrade is difficult. You can refer to the directory structure and some functions to implement the upgrade. It is not recommended to use the upgrade directly in the project.

3.2 the Vue – cli + electron – builder
1.vue create vue-test
2.vue add electron-builder
Copy the code

This ensures that the electron version is new, and that the development mode is similar to vUE, allowing you to debug features such as layouts in Chrome. Personally, I prefer this model

After generating the code, the code can be adjusted by referring to the Electron vue directory structure. As shown in the figure, preload.js in the code can define the communication interface between render process and main process, as shown in the figure below:

Git code:Github.com/miwufe/vue-…

4. Common development desktop comparison

  1. Native(C ++/ C #/ Objective-C) high performance, Native experience, small package size, disadvantages: high threshold, slow iteration
  2. QT (based on c + +) cross-platform 【 MAC, Windows, ios, android/Linux, embedded 】 high-performance, comparable to native experience, shortcomings high threshold, the iteration speed: DropBox WPS
  3. The PC side of the Flutter is still under development with little infrastructure
  4. Nw-js cross-platform, fast iteration, Web technology build, source code encryption, support for Chrome extension, good community disadvantages: large package, mediocre performance
  5. Electron cross-platform Web technology building active community large application case Disadvantages: large package size, mediocre performance

With WebContainers support xie.infoq.cn/article/b7f… There are more and more things to do in the future, and electron may exit the stage in the future.