electron搭建开发环境

Posted 每周向前一小步

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了electron搭建开发环境相关的知识，希望对你有一定的参考价值。

 

mkdir chapter1

cd chapter1

yarn init

yarn config set ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron/

yarn add electron@^8.1.0 --dev

 

新建页面index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./render.js"></script>
  </body>
</html>

index.js

var electron = require(\'electron\');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var win = null;
app.on(\'ready\', function(){
    win = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true
        }
    });
    win.loadFile(\'index.html\');
    win.on(\'closed\', function(){
        win = null
    });
}
);

app.on(\'window-all-closed\', function () {
    console.log(process.platform);
    if (process.platform !== \'darwin\') app.quit()
});

 

 

yarn start 

如果启动失败，确认一下下面的目录是否存在，如果不存在则说明安装不成功，错误信息中也会提示你重试，那就重试，本人是第二次重试时安装成功

node_modules/electron/dist/

正常启动如下，无报错

$ yarn start
yarn run v1.22.10
$ electron ./index.js

 

 

以上是关于electron搭建开发环境的主要内容，如果未能解决你的问题，请参考以下文章

使用 VSCode 调试 Electron 主进程代码

spring练习，在Eclipse搭建的Spring开发环境中，使用set注入方式，实现对象的依赖关系，通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段

使用 Vue 开发 Electron 桌面应用入门

不开玩笑！真赞！宇宙最全VSCode来搭建Python开发环境（附加必备优质插件推荐）

初识Electron开发桌面应用

Electron环境搭建