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

Reasons why MySQL 8.0 statistics are inaccurate

Preface Whether it is Oracle or MySQL, the new fe...

Detailed explanation of Mysql function call optimization

Table of contents Function call optimization Func...

Html Select uses the selected attribute to set the default selection

Adding the attribute selected = "selected&quo...

Use docker to deploy tomcat and connect to skywalking

Table of contents 1. Overview 2. Use docker to de...

Solution to many line breaks and carriage returns in MySQL data

Table of contents Find the problem 1. How to remo...

Detailed tutorial on installing nvidia driver + CUDA + cuDNN in Ubuntu 16.04

Preparation 1. Check whether the GPU supports CUD...

Detailed installation process of MySQL5.6.40 under CentOS7 64

MySQL5.6.40 installation process under CentOS7 64...

CentOS 8 Installation Guide for Zabbix 4.4

Zabbix server environment platform ZABBIX version...

Vue uses plug-ins to cut pictures in proportion

This article shares the specific code of Vue usin...

MySQL detailed summary of commonly used functions

Table of contents MySQL Common Functions 1. Numer...