preface

I had to develop a desktop application for a company project. When it comes to desktop applications, there are a lot of solutions, and we finally picked Electron, which is what front-end developers like VS Code did, and we’re going to talk about it today.

What is the Electron

Electron lets you build cross-platform desktop applications using JavaScript, HTML and CSS, based on Chromium and Node.js, compatible with Mac, Windows and Linux.

This is a tool for developing desktop applications based on front-end technology, and the underlying is based on Chromium browser. So there are no compatibility issues with Electron development. In today’s world of Web applications, Electron can use almost any Web front-end or Node.js ecosystem technology and solution.

Electron is combined with VUE

Electron-vue

Construct sample code for Electron application based on VUE. Use vue-CLI to create an Electron vue project. Develop on a boilerplate basis.

vue init simulatedgreg/electron-vue my-project
Copy the code

Go into the project and take a look at the directory structure

The.electron-vue folder holds the WebPack build file

SRC /main is the main process folder, index.js is the main file for the application, and Electron is also launched from here. Parameters can be seen in the Electron official document.

SRC /renderer is the renderer process folder, and this is the front-end code we are familiar with. Vue-router and VUex are initialized.

Vue Cli Plugin Electron Builder

Easily build your desktop vue.js application using Electron. Execute the command in the project created using vue-CLI to convert the front end project into the Electron project.

vue add electron-builder
Copy the code

Take a look at the project catalog

It can be seen that this is a project created by Vue-CLI. After running the electron-builder command, the background.js file is added, which is the main application file of electron, in which parameters of electron can be configured. Note that VUe-Router and vuex in SRC were added by me later.

contrast

The star number of Electron-vue on Github is 13.7K, which is a sample project and needs to be modified on its sample after the project is created. Vue CLI Plugin Electron Builder has a star number of 2.9K on Github and can integrate Electron into existing projects. Finally, we chose Vue CLI Plugin Electron Builder. One reason is that it is more flexible, quick and easy to integrate, and the other reason is that the Electron Vue project has been rarely committed on Github since the end of 19th, so there has been little maintenance.

Contact us

1024 Innovation Laboratory

1024Lab official wechat account (add me to pull you into the group!) :

SmartAdmin official wechat account