Electron安装及初始项目

南山隐士 2022年06月25日 21 0

什么是Electron

Electron是一个跨平台的桌面应用开发框架,用html css js的技术开发桌面上面可以安装的软件,可以让我们前端人员用html css js的技术开发跨平台可以安装的桌面软件。

Electron的安装

全局安装一个Electron

npm install -g electron

创建项目

通过git克隆项目

git clone https://github.com/electron/electron-quick-start

安装依赖然后运行

通过electron-forge 创建项目

electron-forge相当于electron的一个脚手架,可以让我们更方便的创建、运行、打包electron项目

全局安装 electron-forge

npm install -g electron-forge

创建项目
electron-forge init 项目名称

默认会安装依赖, 如果失败就重新安装, 可以考虑使用淘宝的源,因为实在太难安装了

手动写一个项目

首先创建一个html文件, 以及创建一个主进程(main.js)

npm init生成一个package.json 配置项目的元数据

编写main.js(这个是主进程)

// 引入
var electron = require('electron')
// 引入应用程序
const { app } = require('electron')
// 引用控制浏览器窗口
const { BrowserWindow } = require('electron')

// 监听应用准备完成的事件
app.on('ready', function() {
  // 创建BrowserWindow的实例, 并设置宽高
  mainWindow = new BrowserWindow({ width: 800, height: 600 })

  // mainWindow.loadFile('index.html');   /*把index.html加载到窗口里面*/

  // 这个是加载本地文件(有node的知识在里面)
  mainWindow.loadURL(path.join('file:', __dirname, 'index.html'))

  // mainWindow.loadURL(`file://${__dirname}/index.html`);
  console.log(path.join('file:', __dirname, 'index.html'))

  // 窗口关闭触发的函数
  mainWindow.on('closed', () => {
    mainWindow = null
  })
})

最后通过 electron . 运行项目

Last Updated: 2022/06/25 19:02:16
GitHub使用技巧 Electron主进程和渲染进程