This is the third day of my participation in the August More Text Challenge

First, let’s take a look at the life cycle in electron. Here I found a very good article on Zhihu.

Electron life cycle

Create the electron project using electron-vue


Electron – Vue is a project combining VUE – CLI and electron, which mainly avoids the tedious process of manually setting up electron application program using VUE. (Vue-Loader components such as Webpack, electric-Packager, electric-Builder, vuE-Router and VUEX need not be introduced into the project manually.)

  1. Global installation vUE – CLI

    npm install @vue/cli -g
    Copy the code
  2. Use vuE-CLI scaffolding tools to create projects

    vue init simulatedgreg/electron-vue project_name
    Copy the code
  3. Install dependencies

    npm install 
    Copy the code
  4. Run the template program

    NPM run dev or NPM run buildCopy the code

Electron -vue project directory structure

My - project ├ ─. Electron - vue (webpack profile) │ └ ─ build. Js (production environment building code) │ └ ─ dev - client. Js (thermal load related) │ └ ─ dev - runner. Js (development environment to start the entrance) │ └ ─ webpack. Main. Config. Js (main process configuration files) │ └ ─ webpack. The renderer. Config. Js (rendering process configuration file) │ └ ─ webpack. Web. Config. Js ├ ─ Build (file package use) │ └ ─ win - unpacked / │ │ ├ ─ locales (regional language resource bundle) │ │ ├ ─ resources (regional language resource bundle) │ │ ├ ─ *. DLL (dynamic link library) ├ ─ Dist │ ├─ Electron / ├─ Node_modules / ├─ SRC │ ├─ main │ ├─ Index. dev.js (bundled index.js- This file is used exclusively for the development phase, ├─ ├─ exercises, ├─ exercises, exercises, exercises, exercises, exercises, exercises, exercises │ │ ├─ Heavy Metal Parts / │ ├─ Heavy metal Parts/Heavy metal Parts/Heavy metal parts/Heavy metal parts/Heavy metal parts Such as vuex) │ │ ├ ─ App. Vue │ │ └ ─ main. Js │ └ ─ index. The ejs ├ ─ static/(static files)#Global configuration file├─.bass └─.bass └─.bass ├─ package.json ├.mdCopy the code

aboutmainprocess

In actual development, such a file SRC /main/index.dev.js exists. This file is dedicated to developing and installing development tools. In principle, this file should not be modified, but can be used to extend your development requirements. During the build process, WebPack steps in and creates a bundle with SRC /main/index.js as the entry file for the bundle.

The main process

In Electron, the process of running the package.json main script is called the main process. A script running in the main process can display its graphical interface by creating a Web page.

Excerpt from the Electron document

Since the main process is essentially a complete Node environment, there is no initial project structure other than the following two files.

src/main/index.js

This file is the main file for your application, and electron also launches from here. It is also used as an entry file for WebPack product builds. This is where all main work should start.

app/src/main/index.dev.js

This file is used specifically for the development phase, because it installs electron-debug and vue-devTools. This file generally does not need to be modified, but it can be used to extend the requirements you develop.