I’m learning how to develop desktop application using electron with Vue.js. Developing electron application is like developing web application so having one or more good JS framework is a good thing, so I am going to write about how to just do it.
Steps
- Install Vue.js globally.
npm install -g @vue/cli
- Execute the following command to install and configure Vue.js for the development environment.
vue create hoge
- Using down arrow key, select Manually select features and hit enter.
? Please pick a preset: (Use arrow keys)
default (bebel, eslint)
> Manually select features
- Using down arrow key, select Router with space and hit enter.
? Please pick a preset: Manually select features.
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
Babel
TypeScript
Progressive Web App (PWA) Support
Router
CSS Pre-processors
Linter / Formatter
Unit Testing
E2E Testing - Type n and hit enter with the following prompt.
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
- Using arrow key, select ESLint + Prettier and hit enter.
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
EsLint + Airbnb config
ESLint + Standard config
> ESLint + Prettier - Select Lint on save and hit enter.
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
Lint on save
Lint and fix on commit. - Next, select In dedicated config files option.
? Where do you prefer placing config for Bebel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json - It’s up to you but I am select N as a option here because I am not planning to use the selection for future projects.
? Save this as a preset for future projects? (y/N)
- Wait for a while it’s installing and configuring Vue.js for your project.
- Navigate into the project directory.
cd hoge
- Next, add the component to build Electron application with Vue.js by entering the following command.
vue add electron-builder
- Select the version of Electron you would like to use and hit enter.
? Choose Electron Version (Use arrow keys)
^4.0.0
^5.0.0
> ^6.0.0 - To test Vue.js enabled Electron application, run the following command.
npm run electron:serve
- To generate distributable files, run the following command.
npm run electron:build
- You will get
hoge/dist_electron/hoge-0.1.0.dmg
file if you are on MacOS. The file can be distributable to whoever wants to run your application.
Recap
Electron is a way to distribute your web application as a desktop application and having Vue.js as a framework for your UI is a very efficient way to develop your application.