创建Electron应用程序(1)

163 阅读1分钟

浏览器赢了。你每天使用100个应用程序,其中99个是浏览器应用程序。

对于跨平台应用程序来说尤其如此。

不幸的是,虽然浏览器可以制作很棒的UI,但它们在做其他事情时非常有限。

我将在未来的中更多地谈论各种替代品及其缺点,现在让我们开始我们的第一个Electron应用程序。

入门

创建一个新文件夹,然后开始吧!

$ npm init -y
$ npm install --save-dev electron
$ npx electron .
Cannot find module 'index.js'. Please verify that the package.json has a valid "main" entry

它告诉我们需要创建index.js

我们需要从electron 包中导入一些东西,创建一个窗口,并加载一个文件来显示页面。

let { app, BrowserWindow } = require("electron")

function createWindow() {
  let win = new BrowserWindow({})
  win.maximize()
  win.loadFile("index.html")
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})

现在我们需要创建index.html

<!DOCTYPE html>
<html>
  <body>
    <h1>Welcome to the Internet!</h1>
  </body>
</html>

如果你运行npx electron .,它将显示我们刚刚创建的窗口。

结果

原文:dev.to/taw/electro…