electron新手入门—1
electron小白用户,按照本文操作可以实现Demo运行。
一、安装依赖环境:
1、使用brew安装node:
brew install node
2、检验node和npm版本
node -v
v11.3.0
npm -v
v11.3.0
3、安装electron:
方法一:
npm install -g electron
方法二(使用淘宝镜像):
cnpm install -g electron
二、创建文件:
1、创建文件夹名称为electron_demo:
mkdir electron_demo
打开终端,执行:
cd electron_demo/
2、使用npm init设置App信息,执行npm init会提示配置App信息,按照提示操作,package name不支持大写。
点击回车可以看到electron_demo目录下多了一个package.json文件。
3、给当前项目electron_demo安装electron:
方法1:
npm install --save-dev electron
方法2(使用淘宝镜像):
cnpm install --save-dev electron
4、创建main.js文件,并添加以下内容:
const electron = require("electron");
const { app, ipcMain, BrowserWindow, session} = electron;
var myWork;
app.on("ready", (e) => {
myWork = new BrowserWindow({
center: true,
webPreferences: {
plugins: true,
allowDisplayingInsecureContent: true,
allowRunningInsecureContent: true,
}
});
myWork.loadURL(__dirname + "/index.html");
myWork.show();
myWork.openDevTools();
});
5、在electron_demo文件目录下创建index.html,并添加以下内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>houzhigao.cn</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
6、修改package.json文件中的main值
到此处为止,electron项目已经创建完成。
三、运行:
在当前目录下直接执行:
electron .
注意electron后面有一个空格和点
当前目录结构:
扩展:
安装淘宝镜像方法:
淘宝 npm 地址: http://npm.taobao.org/
临时使用:
npm --registry https://registry.npm.taobao.org install express
持久使用:
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功
npm config get registry
通过cnpm使用:
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用:
cnpm install electron
更多信息,请访问:houzhigao.cn