Recently, the company has no projects for the time being. Suddenly I sat down and was bored. I wanted to learn some other technologies and develop a simple desktop application, so I chose the electron technology. Now I will share with you.
electron: The official document https://www.electronjs.org/ explains the benefits of desktop application development.
If you can build a website, you can build a desktop application. Electron is a framework that uses web technologies such as JavaScript, HTML and CSS to create native programs. It is responsible for the more difficult parts. You only need to focus on the core of your application.
As mentioned above: you can develop with JavaScript, HTML and CSS . We learn the electron desktop application has the following advantages:
1. Reduce learning costs. Front-end developers do not need to learn a new development language, and learning will not take a lot of time; moreover, the difficulty of electron learning is much simpler than other C#, .net, etc., and it is friendly to many developers.
2. Huge community: electron is an official product of github. It has been affirmed by developers from all walks of life whether it is framework technology, number of users, or user trust.
3. Reduce workload: Electron is cross-platform and can develop web applications and desktop applications at the same time. Whether it is UI or code (JS), most resources can be shared, which greatly reduces the workload for developers, even Enterprises do not need to repeatedly invest manpower to develop the system.
4. The future development market is broad. From the perspective of the main users of electron , many of them are big manufacturers, such as Ant Financial, Xiaomi, Huawei, GitHub (Electron is launched by GitHub), Microsoft, etc. Since GitHub is now acquired by Microsoft, the current backend of Electron is Microsoft . Therefore, you don’t have to worry about having no market in the future to learn Electron. After all, all major factories are using Electron.
Let me learn about electron now!
1. Set up a development environment
Officially given:
Electron supports Windows 7 and above—any attempt to develop Electron on lower versions of Windows will be futile.
Electron is a technical plug-in support provided by nodejs. First of all, in order to avoid some unnecessary errors in the compilation environment, install the latest version of nodejs node download
Then install git git download (required to pull the official example code remotely below)
Second, create the project
1. Install the plug-in:
cnpm i -g electron
npm i -g electron
yarn electron
choose any installation method
Recommended to use
cnpm i -g electron
2. Create a project:
Method 1:
npx create-electron-app xxx //where npx is the latest version 10 built-in command of node
Method Two:
cnpm i -g yarn //install the yarn command
yarn create-electron-app xxx
Method three:
cnpm install -g @electron-forge/cli //Install electron-forge scaffolding
electron-forge init xxx //Create and initialize the project
cd xxx //Enter the xxx project directory
npm start //Run the project
Method 4: Pull from remote warehouse
Clone the warehouse of the sample project
$ git clone https://github.com/electron/electron-quick-start
Enter this warehouse
$ cd electron-quick-start
Installation dependencies
$ npm install
Method 5: Create manually (If you are interested, go to bilibili to search for the video, there are many explanations of this kind of video)
Three, run
Use the command line:
above sea level start
If it is manually created, use
electron. //Point is the default running file of the current project
The screenshot is as follows (this is an example of a github remote warehouse):
As shown in the figure above, I simply build and run a desktop application successfully!