​

1. Create project folders

If I create a project folder in disk E, the path is: E:\ net_project management \ net_test project \Net_ElectronByVSCode\Project1Create a new folder under this folderappFolder, used to store the relevant code you write, the purpose is to distinguish the code and run debugging related environment and third-party package, convenient project maintenance;

​

2. Create and edit package.json

The package.json file can be created using VSCode directly to create and edit the associated properties. Here we introduce NPM init to automatically create and initialize the file.

Run CMD as administrator, then locate the project folder E:\Net_ project management \Net_ Test project \Net_ElectronByVSCode\Project1, then enter the command CNPM init and press Enter. For the configuration of CNPM, please refer to article ** instructions for installing Electron in Windows). After pressing enter, you will be asked to input the relevant configuration information in sequence (after entering a message, press Enter). The information is as follows:

  • Package name: the name of the project, which can only be lowercase and can be connected with underscores, as I entered here: el_test
  • Version: indicates the version number. The default value is 1.0.0. If you do not want to enter this value, press Enter
  • Enter the description of the project, for example, here I enter the first test project for Electron
  • Entry point: main program entry file, default is index.js, here I enter:./app/index.js, the reason is that in the first step we created an app folder for program code
  • The test command:
  • The git repository:
  • Keywords:
  • Author: author, here I typed Quber
  • License: indicates authorization information

After entering the license item, press Enter. Is this OK? (yes), and press Enter to create package.json

​

3. Install the Electron depending on the environment

Run CMD as administrator, then locate the project folder E:\Net_ Project management \Net_ Test project \Net_ElectronByVSCode\Project1, Then type CNPM install electron@^8.0.0 (**@^8.0.0** indicates that the version number for installing electron is 8.0.0) and press Enter.

​

After the installation is complete, we will have an additional folder node_modules in our project folder, as shown below:

​

At this point, the Electron environment developed using VSCode is set up.

4, create main entry program index.js

Open VSCode, create index.js in app folder, and write the following code in index.js:

//./app/index.js // adopt javascript strict mode 'use strict'; // Apply control module const electron = require('electron'); const app = electron.app; // the module that creates the native BrowserWindow const BrowserWindow = electron.browserwindow; var mainWindow = null; App. on('window-all-closed', function () {if (process.platform! = 'darwin') { app.quit(); }}); // When the Electron finishes, On ('ready', function () {// create a BrowserWindow. MainWindow = new BrowserWindow({width: 800, height: 600 }); // Load the app's index.html mainwindow.loadurl ('file://' + __dirname + '/index.html'); // mainwindow.openDevTools (); Mainwindow.on ('closed', function () {// To unreference window objects, if your application supports multiple Windows, // Usually you need to store all window objects in an array, // At this point you should remove the corresponding element mainWindow = null; }); });Copy the code

5. Create the main form file index.html

We also create index.html in the app folder and write the following code in the index.html file:

<html> <meta http-equiv="Content-Type" content="text/html; Charset =UTF-8"> <title> First test Electron project </title> <body> <h1>Hello Electron! </ H1 > < H1 > Hello, Electron! </h1> <a href="javascript:;" Onclick ="alert "(' I am a pop-up message! ');" > Click on me </a> </body> </ HTML >Copy the code

6. Run the application

Method 1: Run CMD as the administrator, then locate the project folder E:\Net_ project management \Net_ Test project \Net_ElectronByVSCode\Project1, and enter the command electron. , run the command and the effect are as follows:

​

Method 2: You can use the gulp tool to run the application

First, make sure that gulp is already installed. You can enter the command gulp -v in CMD to view the version of gulp installed. If the following message is displayed, the gulp tool is not already installed on your computer

​

In this case, you need to install the gulp tool globally, run CMD as administrator, and then type the commandcnpm install -g gulp, as shown in the following figure, the installation is successful

​

After installing the full office gulp tool, you also need to install it separately in each project using gulp, run CMD as administrator, and then locate the project folder E:\Net_ project management \Net_ Test project \Net_ElectronByVSCode\Project1“, and then enter the commandcnpm install -save-dev gulpPress Enter, as shown below:

​

Gulp after the installation is complete, we through VSCode gulpfile created in the project folder, js, then you can use gulpfile. Js to create a gulp of task, gulpfile. Js code is as follows:

Var gulp = require('gulp'), childProcess = require('child_process'), electron = require('electron'); Gulp.task ('run_ele', function () {childprocess. spawn(electron, ['.'], {stdio: 'inherit'}); });Copy the code

Run CMD as administrator, then locate the project folder E:\Net_ project management \Net_ Test project \Net_ElectronByVSCode\Project1“, and then enter the commandgulp run_ele(one of therun_eleIt’s in gulpfile.jsrun_ele[Task name]) Press Enter to run the command and the result is as shown in the picture below:

​

Also, we can use VSCode’s shortcut command to run the app, press Ctrl+Shift+P, then type run in the input box, then select “run task” from the drop-down that appears, then gulp:run_ele from the drop-down that appears next, Then select “Continue without scanning task output” from the drop-down list that appears next, and the change application is now running, as shown below:

​

Does it feel a little cumbersome to run like this? Hold on, we can configure Ctrl+Shift+B to automatically run the application, press Ctrl+Shift+P, then type task in the input box, select “Configure default build task” from the drop down option, then select “gulp:run_ele” from the drop down option that appears, The vscode folder and tasks.json configuration file are then generated in the project folder. Press Ctrl+Shift+B to run the application without using CMD to run the application, as shown below:

​

​