Sample code for making desktop applications with vue + Electron

Sample code for making desktop applications with vue + Electron

1.vue packaging

Here we use the vue native packaging command to package the vue project

npm run build

2. Configure Electron

Using Electron to create desktop applications requires two configuration files

1.package.json

Create a package.json file and put the following code in

{
  "name": "demo", //Project name "productName": "demo",
  "author": "Author",
  "version": "1.0.4",
  "main": "main.js",
  "description": "Project description",
  "scripts": {
  	"start": "electron .", //Start the electron project "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "electron-builder install-app-deps",
	"packager": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0" //Package the project into an exe file},
  "build": {
    "electronVersion": "2.0.18",
    "win": {
      "requestedExecutionLevel": "highestAvailable",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "appId": "demo",
    "artifactName": "demo-${version}-${arch}.${ext}",
    "nsis": {
      "artifactName": "demo-${version}-${arch}.${ext}"
    }
  },
  "dependencies": {
    "core-js": "^2.4.1",
    "electron-updater": "^2.22.1"
  },
  "devDependencies": {
    "electron-packager": "^12.1.0",
    "electron-builder": "^20.19.2"
  }
}

2.mian.js

Create main.js and put the following code in

[Note] win.webContents.openDevTools(); This code means opening the debug window. It needs to be commented out when generating an exe file.

onst {app, BrowserWindow} =require('electron'); //Introduce electron
let win;
const path = require('path')
let windowConfig = {
  width:800,
  height:600,
  webPreferences:{preload: path.resolve(__dirname, 'electron-preload.js')}
}; //Window configuration program running window size function createWindow(){
  win = new BrowserWindow(windowConfig); //Create a window win.loadURL(`file://${__dirname}/index.html`); //The content to be displayed in the window index.html is the packaged generated index.html
  win.webContents.openDevTools(); //Open debugging tools win.on('close',() => {
    //Recycle BrowserWindow object win = null;
  });
  win.on('resize',() => {
    win.reload();
  })
}
app.on('ready',createWindow);
app.on('loaded',()=>{
  console.log("aaa")
});
app.on('window-all-closed',() => {
  app.quit();
});
app.on('activate',() => {
  if(win == null){
    createWindow();
  }
});

const { ipcMain } = require('electron')
ipcMain.on("ping",function(even,arg){
  console.log(arg)
  even.returnValue = "pong"
})

3. Put the package.json file and main.js file into the dist directory of the vue package

insert image description here

4. Open the node command window in the dist directory and execute npm install or cnpm install to download dependencies

npm install

5. After the dependencies are downloaded successfully, execute npm start to start the project and check whether the project runs successfully

npm start

The result after successful operation:

insert image description here

6. If no bug is found after running, execute npm run packager to make the project into an exe file. After successful production, the installation package of the desktop application will be generated in the current directory

npm run packager

Folder after successful packaging

insert image description here

Click on the exe file to open the application directly.

insert image description here

This is the end of this article about making desktop applications with vue + Electron. For more relevant vue Electron desktop application content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed code for adding electron to the vue project
  • How to start a Vue.js project
  • The implementation idea of ​​adding startup loading animation to the electron-vue project

<<:  Comparison of the use of form element attributes readonly and disabled

>>:  How to hide rar files in pictures

Recommend

Linux beginners in virtual machines configure IP and restart the network

For those who are new to virtual machines or have...

In-depth understanding of the matching logic of Server and Location in Nginx

Server matching logic When Nginx decides which se...

A brief talk about JavaScript variable promotion

Table of contents Preface 1. What variables are p...

Sharing tips on using vue element and nuxt

1. Element time selection submission format conve...

Steps to transplant the new kernel to the Linux system

1. Download the ubuntu16.04 image and the corresp...

JavaScript and JQuery Framework Basics Tutorial

Table of contents 1. JS Object DOM –1, Function –...

How to center your HTML button

How to center your HTML button itself? This is ea...

4 Practical Tips for Web Page Design

Related articles: 9 practical tips for creating we...

How to build your own Angular component library with DevUI

Table of contents Preface Creating a component li...

Linux uses dual network card bond and screwdriver interface

What is bond NIC bond is a technology that is com...

MySQL Error 1290 (HY000) Solution

I struggled with a problem for a long time and re...

An example of using Dapr to simplify microservices from scratch

Table of contents Preface 1. Install Docker 2. In...

Examples and comparison of 3 methods for deduplication of JS object arrays

Table of contents 1. Comparison of data before an...