Electron +Vue +Builder Hello World 运行并打包

Posted 2021-03-18 linsu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Electron +Vue +Builder Hello World 运行并打包相关的知识，希望对你有一定的参考价值。

1.配置环境说明

技术图片

2.创建项目并编写hello world

技术图片

在ele-project 根目录下面创建index.html、 main.js

index.html

1 <!DOCTYPE html>
2 <html>
3   <head>
4     <title>Hello World!</title>
5   </head>
6   <body>
7     <h1>Hello World!</h1>
8   </body>
9 </html>

main.js

 1 const {app, BrowserWindow} = require(‘electron‘)
 2 
 3 let  mainWindow = null
 4 
 5 function createWindow () {
 6     // Create the browser window.
 7     mainWindow = new BrowserWindow({
 8       width: 800,
 9       height: 600
10     })
11   
12     // and load the index.html of the app.
13     mainWindow.loadFile(‘index.html‘)
14   
15     // Open the DevTools.
16     // mainWindow.webContents.openDevTools()
17   
18     // Emitted when the window is closed.
19     mainWindow.on(‘closed‘, function () {
20       // Dereference the window object, usually you would store windows
21       // in an array if your app supports multi windows, this is the time
22       // when you should delete the corresponding element.
23       mainWindow = null
24     })
25   }
26   
27   // This method will be called when Electron has finished
28   // initialization and is ready to create browser windows.
29   // Some APIs can only be used after this event occurs.
30   app.on(‘ready‘, createWindow)
31   
32   // Quit when all windows are closed.
33   app.on(‘window-all-closed‘, function () {
34     // On macOS it is common for applications and their menu bar
35     // to stay active until the user quits explicitly with Cmd + Q
36     if (process.platform !== ‘darwin‘) app.quit()
37   })
38   
39   app.on(‘activate‘, function () {
40     // On macOS it‘s common to re-create a window in the app when the
41     // dock icon is clicked and there are no other windows open.
42     if (mainWindow === null) createWindow()
43   })