Electron 实践第一天

144 阅读1分钟

Electron 实践第一天

electron.png

使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序,官网www.electronjs.org/

1.案例

比你想象的更简单

如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aaaf9c8870454b23a9a8f6b0aedbcf1d~tplv-k3u1fbpfcp-zoom-1.image

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5fc3bc4dd5e4c588f9253f305766878~tplv-k3u1fbpfcp-zoom-1.image

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14e945abd8dc4c7e872060303e0e3efa~tplv-k3u1fbpfcp-zoom-1.image

2.安装

npm i -D electron@latest
npm install electron -g
# 全局安装

前提是必须先安装好nodejs,具体如下:

// 如果没有node 的话先装 node
http://nodejs.cn/download/

// 在当前目录安装最新
npm i -D electron

// 全局安装最新
cnpm install electron -g

// 当然你可以指定版本号安装
npm i -D electron@11.0.4

3.快速开始

3.1 初始化package.json文件

(p2) PS F:\electron-lesson\electron-1> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (electron-1)
version: (1.0.0) 0.0.1
description: my first day of electron
entry point: (index.js)
test command: nodemon --watch index.js --exec electron .
git repository:
keywords: study electron first day
author: livingbody
license: (ISC)
About to write to F:\electron-lesson\electron-1\package.json:

{
  "name": "electron-1",
  "version": "0.0.1",
  "description": "my first day of electron",
  "main": "index.js",
  "scripts": {
    "test": "nodemon --watch index.js --exec electron ."
  },
  "keywords": [
    "study",
    "electron",
    "first",
    "day"
  ],
  "author": "livingbody",
  "license": "ISC"
}


Is this OK? (yes) yes

如上所述,生成package.json文件

运行

> electron-1@0.0.1 test
> nodemon --watch index.js --exec electron .

'nodemon' 不是内部或外部命令,也不是可运行的程序
或批处理文件。
npm install nodemon -g

npm install electron -g
npm test