electron创建工程的三种方式
electron环境搭建
安装 (全局安装 只需要一次)
npm install -g electron / cnpm install -g electron (不会cnpm 百度搜cnpm)
electron创建工程的三种方式
一、git克隆electron-quick-start项目
1.cd到对应的项目里面
2、执行下面命令
// 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
// 进入这个仓库
cd electron-quick-start
// 安装依赖并运行
cnpm install 、 npm install 安装依赖
// 运行
npm start
二、通过electron-forge 创建项目
electron-forge相当于electron的一个脚手架,可以让我们更方便的创建、运行、打包electron项目。
// 全局安装 electron-forge(只需要一次)
npm install -g electron-forge / cnpm install -g electron-forge
// 创建项目
// 注意:这一步会默认安装模块 ,如果失败删掉node_modules,重新cd到项目里面运行 cnpm install 或者yarn
electron-forge init my-new-app
// cd到项目里面
cd my-new-app
// 运行项目
npm start
经测试发现运行报错
解决办法:
把怕
package.json
文件的内容替换成以下内容{ "name": "my-new-app", "productName": "my-new-app", "version": "1.0.0", "description": "My Electron application description", "main": "src/index.js", "scripts": { "start": "electron-forge start", "package": "electron-forge package", "make": "electron-forge make", "publish": "electron-forge publish", "lint": "eslint src --color" }, "keywords": [], "author": "Administrator", "license": "MIT", "config": { "forge": { "make_targets": { "win32": [ "squirrel" ], "darwin": [ "zip" ], "linux": [ "deb", "rpm" ] }, "electronPackagerConfig": { "packageManager": "yarn" }, "electronWinstallerConfig": { "name": "my_new_app" }, "electronInstallerDebian": {}, "electronInstallerRedhat": {}, "github_repository": { "owner": "", "name": "" }, "windowsStoreConfig": { "packageName": "", "name": "mynewapp" } } }, "dependencies": { "electron-compile": "^6.4.3", "electron-squirrel-startup": "^1.0.0" }, "devDependencies": { "babel-plugin-transform-async-to-generator": "^6.24.1", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "electron-forge": "^5.2.2", "electron-prebuilt-compile": "2.0.4", "eslint": "^3", "eslint-config-airbnb": "^15", "eslint-plugin-import": "^2", "eslint-plugin-jsx-a11y": "^5", "eslint-plugin-react": "^7" } }
- 把ndoe_modules删掉
- cmd 运行 npm i 或 cnpm i
三、手动创建
1、新建一个项目的文件夹 (文件夹不能是中文)
2、新建一个index.html 和一个main.js
3、npm init --yes 生成一个package.json 配置项目的元数据
注意的是package.json里面配置的 main 必须是入口js(主进程)
main.js Demo代码
// 引入electron模块
let electron = require('electron');
let app = electron.app;
let BrowserWindow = electron.BrowserWindow;
// 引入nodejs中的path模块
let path = require('path')
let mainWindow = null;
app.on('ready', ()=> {
// 声明一个窗口
mainWindow = new BrowserWindow({
width: 800,
height:600,
// 解决 Electron 5.0 版本出现 require is not defined 的问题
webPreferences: {
nodeIntegration: true
}
});
// 窗口加载指定页面
// mainWindow.loadFile("index.html");
mainWindow.loadURL(path.join('file:',__dirname,'index.html'));
console.log(path.join('file:',__dirname,'index.html')); // file:\D:\work\code\electronproject\eledemo03\index.html
// 关闭窗口的回调函数
mainWindow.on('close', () => {
mainWindow = null;
});
});
4、electron . 运行项目