What is electron?
The official website explains: use
h5The application is packaged into a desktop application, such as a
exeInstallation package, or a
macInstallation package for. So we don’t have to open our app in the browser. And it runs directly like Tencent QQ.
VS code, facebook managerIt was developed and packaged with this artifact.
Electron is an open source project jointly maintained by an active community of GitHub and many contributors.
Electron is compatible with Mac, windows and Linux, and can build applications on three platforms.
How to install
electronIt’s simple, just like any other bag, direct
npm i -D [email protected]
Develop and package H5 applications
Let’s first install the official example:
#Clone repository for sample project $ git clone https://github.com/electron/electron-quick-start #Enter this warehouse $ cd electron-quick-start #Install dependencies and run $ yarn install && yarn start
After startup, it is found that a desktop application has been started:
Package the application and execute the following command:
npm install electron-packager --save-dev electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
- Location of project: the path of the project
- Name of project: the name of the packaged project
- Platform: determines which platform application you want to build (windows, MAC or Linux, optional values: Darwin, Linux, MAS, Win32)
- Architecture: decide whether to use x86 or x64 or both
- Electronic version: the version of electron
- Optional options: optional options
We add the following command to the
scriptUnder the node:
"packager": "electron-packager ./ fristProject --platform=win32 --arch=ia32 --out ./outApp --electron-version 1.4.0 --overwrite"
The first time the package is slow, because to download the compiled file, it is better to use the
yarn packagerCome and pack. When it’s packaged, we get one
exeThe implementation file of.
So we get one
h5Developed desktop applications. Let’s introduce how to use
electron-vueTo develop and package our chat room program.
Execute the following commands in turn:
npm install -g vue-cli vue init simulatedgreg/electron-vue ws-chat
After the above operation is completed,
yarn devWe can start our development environment.
Due to a slight change in the directory structure, we can change the
vue-cliCopy the code in the SRC directory to
/src/renderer。 Then merge the NPM that the previous project relied on into the current one
main.jsIt also needs to be consolidated. Just finish one
electron-vueProject migration work.
Next we package our program:
If there is no response or error in the packaging process, please refer to this article:
Electronic Vue packaging, using electronic builder packaging, simple and convenient
After packaging, run:
electronIt can package your web application into a cross platform desktop program
- In terms of development,
electronAt the same time, it has the ability of web browser, and also has the ability of web browser
nodeJsThe ability to combine web pages and
nodeJsCombined, it makes reading and writing files and accessing database easy and powerful.
vue-cliThe project of scaffold construction shall be relocated.
electronThere are still many holes in the process of use, especially when packing, you need to carefully refer to the official documents.
Personal feeling, learn the front end, will be mobile app (react native, streaming applications, web view hybrid applications), H5 applications, web applications, various small programs, nodejs background services, cross platform desktop applications, and even use
cocos createrMost of the top wechat games are developed with this platform, and the technology used is
canvasTo achieve. It’s omnipotent.
Learning is like sailing against the current. If you don’t keep up with the rapid development of front-end technology, if you don’t insist on learning every day, you will not be able to keep up with me. I will accompany you to push blog posts every day and make progress with you. I hope you can pay attention to me and receive the latest articles as soon as possible.
Official account No.