electron环境搭建_手动搭建一个electron项目

admin

1、新建一个项目目录   例如：electrondemo01
2、在electrondemo01目录下面新建三个文件:   index.html、main.js 、package.json
3、index.html 里面用css 进行布局（以前怎么写现在还是怎么写）
4、在main.js 中写如下代码：

1. 
   
2. var electron =require('electron');
   
3. 
   
4. //electron对象的引用
   
5. 
   
6. const app=electron.app;
   
7. 
   
8. //BrowserWindow类的引用
   
9. 
   
10. const BrowserWindow=electron.BrowserWindow;
    
11. 
    
12. 
    
13. 
    
14. let mainWindow=null;
    
15. 
    
16. //监听应用准备完成的事件
    
17. 
    
18. app.on('ready',function(){
    
19. 
    
20.     //创建窗口
    
21. 
    
22.     mainWindow=new BrowserWindow({width: 800, height: 600});
    
23. 
    
24.     mainWindow.loadFile('index.html');
    
25. 
    
26.     mainWindow.on('closed', function () {      
    
27. 
    
28.       mainWindow = null;
    
29. 
    
30.     })
    
31. 
    
32. })
    
33. 
    
34. //监听所有窗口关闭的事件
    
35. 
    
36. app.on('window-all-closed', function () {
    
37. 
    
38.   // On OS X it is common for applications and their menu bar
    
39. 
    
40.   // to stay active until the user quits explicitly with Cmd + Q
    
41. 
    
42.   if (process.platform !== 'darwin') {
    
43. 
    
44.     app.quit();
    
45. 
    
46.   }
    
47. 
    
48. })

复制代码

5、运行

1. electron .          注意：命令后面有个点

复制代码