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