1.vue packagingHere we use the vue native packaging command to package the vue project
2. Configure ElectronUsing 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 4. Open the node command window in the dist directory and execute npm install or cnpm install to download dependencies
5. After the dependencies are downloaded successfully, execute npm start to start the project and check whether the project runs successfully
The result after successful operation: 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
Folder after successful packaging Click on the exe file to open the application directly. 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:
|
<<: Comparison of the use of form element attributes readonly and disabled
>>: How to hide rar files in pictures
For those who are new to virtual machines or have...
Server matching logic When Nginx decides which se...
Table of contents Preface 1. What variables are p...
The specific code for encapsulating the image cap...
1. Element time selection submission format conve...
1. Download the ubuntu16.04 image and the corresp...
Table of contents 1. JS Object DOM –1, Function –...
How to center your HTML button itself? This is ea...
Related articles: 9 practical tips for creating we...
Table of contents Preface Creating a component li...
What is bond NIC bond is a technology that is com...
I struggled with a problem for a long time and re...
Mysql5.7.19 version is a new version launched thi...
Table of contents Preface 1. Install Docker 2. In...
Table of contents 1. Comparison of data before an...