Electron系列之安装和hello world

ゝ一纸荒年。 2022-07-24 08:27 169阅读 0赞

# 资源链接 #

[官网][Link 1]  
[社区][Link 2]  
[下载][Link 3]

# 使用npm安装 #

# Install the `electron` command globally
    npm install electron-prebuilt -g

![这里写图片描述][20160518163116350]

# Install as a development dependency
    npm install electron-prebuilt --save-dev

![这里写图片描述][20160518163327930]

在安装目录下找到下载好的electron-v1.1.0-win32-x64.zip文件

![这里写图片描述][20160518163856611]

将这个文件拷贝到其他地方，然后解压，解压之后文件清单如下：

![这里写图片描述][20160518163922205]

双击.exe文件，出现如下画面：

![这里写图片描述][20160518164001675]

# 哈喽，world #

新建一个文件夹，命名为electron，在文件夹目录下，创建三个文件，`package.json`，`main.js`，`index.html`

文件夹目录的结构如下：

![这里写图片描述][20160518164733107]

package.json

{
      "name"    : "your-app",
      "version" : "0.1.0",
      "main"    : "main.js" }

main.js

index.html

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
      </head>
      <body>
        <h1>Hello World!</h1>
        We are using node <script>document.write(process.versions.node)</script>,
        Chrome <script>document.write(process.versions.chrome)</script>,
        and Electron <script>document.write(process.versions.electron)</script>.
      </body>
    </html>

然后将整个文件夹，拖到Electron.exe中，显示效果如下图所示：

![这里写图片描述][20160518164955171]

[Link 1]: http://electron.atom.io/
[Link 2]: https://discuss.atom.io/c/electron
[Link 3]: http://electron.atom.io/releases/
[20160518163116350]: /images/20220722/035f5335cbae45ec9c7762660e165978.png
[20160518163327930]: /images/20220722/bbeb6fa8b80e4300adbf7e223684e6e6.png
[20160518163856611]: /images/20220722/1025bbeadf7f45f49f045c61b1bd5fbf.png
[20160518163922205]: /images/20220722/d7e68a4671684280a9c90a190e50f703.png
[20160518164001675]: /images/20220722/8f705e102b884c2d8c4e05c548f73f9f.png
[20160518164733107]: /images/20220722/c5d2dc29e75943ba8ee5c9875693224e.png
[20160518164955171]: /images/20220722/bfdd0c7032734923b0d90630cb1b1b8e.png