How to make Desktop applications with vue+Electron

Editor to share with you how to make desktop applications on vue+Electron. I hope you will get something after reading this article. Let's discuss it together.

1.vue packing

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

Npm run build

two。 Configure Electron

Making desktop applications using Electron requires two configuration files, 1.package.json to create a package.json file, and put the following code into

{"name": "demo", / / Project name "productName": "demo", "author": "author", "version": "1.0.4", "main": "main.js", "description": "Project description", "scripts": {"start": "electron.", / / launch 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 as 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 a main.js to put the following code into the

[note] win.webContents.openDevTools (); this code means to open a debug window and comment out the exe file when it is generated.

Onst {app, BrowserWindow} = require ('electron'); / / introduce electronlet win;const path = require (' path') let windowConfig = {width:800, height:600, webPreferences: {preload: path.resolve (_ _ dirname, 'electron-preload.js')}}; / / configure the size of the window function createWindow () {win = new BrowserWindow (windowConfig); / / create a window win.loadURL (`window) / / the content to be displayed in the window index.html is the packaged index.html win.webContents.openDevTools (); / / Open the debugging tool 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 packaged by vue

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

Npm install

5. Execute npm start after a successful download, start the project, and check to see if the project runs successfully

Npm start

The result of a successful operation:

6. If bug is not found after running, execute npm run packager and 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

The folder after the package is successful

Click on the exe file to open the application directly.

After reading this article, I believe you have a certain understanding of "how to make desktop applications with vue+Electron". If you want to know more about it, please follow the industry information channel. Thank you for your reading!