Vue + electron to build desktop applications

need

Build a desktop application with Vue.js

analyze

• Choose a Vue.js framework: Choose a framework that works for you Vue.js. Recommended Electronas it is one of the most popular desktop application frameworks and is very compatible with Vue.js. There are other frameworks like Proton Nativeand NW.js.
• Official website: https://www.electronjs.org/zh/docs/latest/
• github case 1 download: https://github.com/electron/electron
• github case 2 download: https://github.com/umbrella22/electron-vue-template
• GitHub case 2 documentation: https://zh-sky.gitee.io/electron-vue-template-doc/Overview/

solve

1. Install Node.js and npm: Before starting, make sure you have Node.js and npm installed. Node.js is a JavaScript runtime environment, and npm is the package manager for Node.js.

   node -v
   npm -v
   

2. Install Vue CLI: Use Vue CLI to quickly create Vue.js projects and components. Run the following command in Terminal to install Vue CLI:

   npm install -g @vue/cli
   

3. Create a Vue.js project: Create a new Vue.js project using the Vue CLI. Run the following command in a terminal:

   vue create my-app
   

   This will create a new Vue.js project called my-app and configure it with default settings.

4. Install Electron: Install Electron in the Vue.js project. Go to the my-app directory in a terminal and run the following command:

   vue add electron-builder
   

   This will install Electron in the Vue.js project and configure the Vue.js project with the electron-builder plugin to build Electron applications.

5. Code Vue.js: Code your application using Vue.js. You can write your code in Vue.js components and use Vue.js lifecycle functions to manage your components.

6. Build the Electron application: Run the following command in the terminal to build the Electron application:

   npm run electron:build
   

   • This will build an Electron application using the electron-builder plugin, and generate an executable.
   • If the following error occurs, it means that the node version of the current environment does not match the electron version
     

7. Run the Electron application: Run the following command in the terminal to run the Electron application:

   npm run electron:serve
   

   This will start the Electron application and run your Vue.js application in development mode.