foreword
Because of the company's project relationship, a desktop application is to be developed. When it comes to desktop applications, there are many solutions. In the end, we chose Electron. VS Code, which is loved by front-end development, is developed by Electron. Today we will talk about this Electron.
What is Electron
Electron lets you build cross-platform desktop applications using JavaScript, HTML and CSS, based on Chromium and Node.js, and is compatible with Mac, Windows and Linux.
These can be seen on the official website. You can understand that this is a tool for developing desktop applications based on front-end technology, and the bottom layer is based on the Chromium browser. So developing with Electron will not encounter any compatibility problems. With the popularity of web applications today, Electron can use almost any web front-end or Node.js ecosystem technologies and solutions.
Electron combined with VUE
Electron-view
Boilerplate code for constructing Electron applications based on Vue. Use vue-cli to create an Electron-vue project. Develop on top of boilerplate code.
vue init simulatedgreg/electron-vue my-project
Enter the project to see the directory structure
The .electron-vue folder contains webpack build files
src/main is the main process folder, index.js is the main file of the application, and Electron is also started from here. Parameters can be found in the Electron official website documentation.
src/renderer is the rendering process folder, here is the front-end code that we are familiar with. It can be seen that vue-router and vuex are initialized.
Vue Cli Plugin Electron Builder
Easily build your desktop VUE.js applications with Electron. Execute commands in a project created with Vue-CLI to convert a front-end project into an Electron project.
vue add electron-builder
Take a look at the project directory
You can see that this is a project created by Vue-CLI. After executing the electron-builder command, the background.js file is added. This is the main application file of Electron, in which various parameters of Electron can be configured. Note that vue-router, vuex, etc. in src are all added by me later.
Compared
Electron-vue has a star number of 13.7K on github. It is a template project. After the project is created, it needs to be modified on its template. Vue CLI Plugin Electron Builder has 2.9k stars on github and can integrate Electron in the original project. In the end, we chose the Vue CLI Plugin Electron Builder. One of the reasons is that it is more flexible, fast, and easy to integrate. Also, the Electron-vue project can be seen on github since the end of 2019. There have been few commits and very little maintenance.