Front-end developers can also develop desktop programs coolly

　Prerequisites: nodejs has been installed .

　　The first step: Fully raise interest, write a hello world desktop program yourself

Open the command line on the desktop (win10 system can hold down the Shift key, right click on the blank space of the desktop, click "open command window here", win7 opens the command line and cd to the desktop) or git.
Enter the following command line to create the electron-test folder
```
mkdir electron-test
```
Then cd to this folder
```
cd electron-test
```
Then in this directory
```
npm init
```
Both choose to press the Enter key by default. After completion, you can see the package.json file in the electron-test folder.
Continue to use the command line to install electron
```
npm install electron --save-dev
```
If the installation fails, you can use the Taobao image to install, execute the following two commands:
```
npm install cnpm -g
cnpm install electron --save-dev
```
After success, you can see it in the package.json file
The electron program is divided into a main process and a rendering process. A simple understanding is to create a window in the main process and write a page in the rendering process. Create the main process file main.js in the electron-test directory, and modify the "main" configuration item of package.json to our main process "main.js". Next, write the following code in main.js (need to understand ES6):

Press Ctrl + C to copy the code

Press Ctrl + C to copy the code
Create index.html in the electron-test directory, the code is as follows:

Press Ctrl + C to copy the code

Press Ctrl + C to copy the code
Modify the scripts configuration item of package.json as follows:

Press Ctrl + C to copy the code

Press Ctrl + C to copy the code

Run the following command on the command line:
```
asl start
```
The hello world program comes out, as shown in the figure:

　　Step 2: Pack the program and share the happiness with everyone

Or run the command line under electron-test, install the packaging tool electron-packager:
```
npm install electron-packager --save-dev
```
Taobao mirror cannot be installed:
```
cnpm install electron-packager --save-dev
```
Modify package.json scripts configuration items as follows:
```
{
  "name": "electron-test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "packager": "electron-packager . app --platform=win32 --arch=x64 --out ./OutApp --overwrite"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^1.6.11"
  }
}
```
Package command configuration items:
```
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
```
Configuration instructions:
* location of project: project path
* name of project: packaged project name
* platform: determines which platform application you want to build (Windows, Mac or Linux)
* architecture: determines whether to use x86 or x64 or two All architectures use
* electron version: the version of electron
* optional options: optional options

are here, the project name is app, the build platform is windows, x64 means 64-bit system, you can choose ia32, --out means the output path is OutApp , --Overwrite means to overwrite the previously generated file.
Command line execution:
```
npm run-script packager
```
When finished, you can see

Send app-win32-x64 to a friend in a compressed package, and the friend can use the program you wrote ~~

　　More detailed tutorials will be written later, the program is automatically updated, the program connects to the operation database, and how the program is packaged with mysql. Users can install your program + mysql with one click.

　　have to be aware of is:

　　electron does not support windows xp system, only supports win7 and above.

Front-end developers can also develop desktop programs coolly

Guess you like