一、安装 Electron
npm install -g electron / cnpm install -g electron
二、克隆一个仓库、快速启动一个项目
要使用 git 的话首先电脑上面需要安装 git
git clone https://github.com/electron/electron-quick-start
进入这个仓库
cd electron-quick-start
安装依赖并运行
npm install && npm start
三、electron-forge 搭建一个 electron 项目
electron-forge 相当于 electron 的一个脚手架,可以让我们更方便的创建、运行、打包
electron 项目。
Github 地址:https://github.com/electron-userland/electron-forge
官网地址:https://www.electronforge.io/
Note: Electron Forge requires Node 10 or above, plus git installed.
1、如果你电脑上面安装了最新版本的 nodejs 可以使用 npx 创建项目,如果你电脑上面
安装了 yarn 也可以使用 yarn 创建项目
或者
yarn create electron-app my-new-app
2、运行项目
cd my-new-app
npm start
3、也可以使用下面方法创建项目(老方法)
npm start
四、手动搭建一个 electron 项目
1、 新建一个项目目录 例如:electrondemo01
2、在 electrondemo01 目录下面新建三个文件: index.html、main.js 、package.json
3、index.html 里面用 css 进行布局(以前怎么写现在还是怎么写)
4、在 main.js 中写如下代码:
const createWindow=()=>{
const mainWindow = new BrowserWindow({
height: 600, });
mainWindow.loadFile(path.join(__dirname, 'index.html'));
// mainWindow.loadURL('https://github.com'); }
app.on('ready', createWindow); //监听窗口关闭的事件,关闭的时候退出应用,macOs 需要排除 app.on('window-all-closed', () => {
if (process.platform !== 'darwin') { app.quit();
} });
if (BrowserWindow.getAllWindows().length === 0) { createWindow();
} });