一、通过electron-quick-start创建项目
-
安装 node、npm(cnpm)
-
全局安装Electron
npm install -g electron
-
检验是否安装成功
npx electron -v
-
创建项目
github镜像:将原本的网站中的http://github.com 进行替换为github.com.cnpmjs.org
###### 克隆示例项目的仓库 git clone https://github.com/electron/electron-quick-start ###### 进入这个仓库 cd electron-quick-start ###### 安装依赖并运行 npm install (cnpm install) npm start
二、 通过electron-forge 搭建
-
electron-forge 相当于 electron 的一个脚手架,可以让我们更方便的创建、运行、打包 electron 项目。
//全局安装Electron npm install -g electron //全局安装electron-forge npm install -g electron-forge //创建项目 electron-forge init my-new-app //进入项目 cd my-new-app //启动项目 npm start
如果一直卡在 Installing NPM Dependencies
-
先安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
-
全局安装 electron、electron-forge、electron-prebuilt-compile:
cnpm install -g electron cnpm install -g electron-forge cnpm install -g electron-prebuilt-compile
-
新建文件夹 electron-forge-demo
mkdir electron-forge-demo
-
在 electron-forge-demo 文件夹中新建文件 .npmrc,内容如下:
electron_mirror=http://npm.taobao.org/mirrors/electron/ registry=https://registry.npm.taobao.org
-
查看 electron-forge-demo 文件夹中的文件:
-
使用 electron-forge 创建项目,.npmrc 文件配置 npm 使用的镜像地址:
-
npm start运行项目
-
运行成功
三、手动创建
-
全局安装Electron
npm install -g electron
-
检验
npx electron -v
-
创建index.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> Hello World! </body> </html>
-
创建main.js
var electron = require('electron') //引入electron模块 var app = electron.app // 创建electron引用 var BrowserWindow = electron.BrowserWindow; //创建窗口引用 var mainWindow = null ; //声明要打开的主窗口 app.on('ready',()=>{ mainWindow = new BrowserWindow({width:400,height:400}) //设置打开的窗口大小 mainWindow.loadFile('index.html') //加载那个页面 //监听关闭事件,把主窗口设置为null mainWindow.on('closed',()=>{ mainWindow = null }) })
-
生成package.json
来初始化package.json文件 npm init --yes
-
启动
electron .
让vscode代码提示
当前项目下
cnpm install electron --save