Electron项目结构的搭建

1. 直接搭建electron的项目

       // 全局安装webpack了的话 生成package.json
        npm init 
       // 1.本地开发环境安装electron库
        npm i -D electron 
       //  在目录下书写  主进程 渲染进程入口文件 main.js为主进程入口  index.html 为  渲染进程入口页面

main.js文件

   // 这里就是主进程 

// 引入electron中的两个模块
// app 是应用对象 BrowserWindow是窗口对象 
//一个electron项目可以打开多个窗口但是应用对象是一个
const {app, BrowserWindow} = require('electron');


let mainWindow

function createWindow () {
 // 创建窗口 并配置窗口属性
 mainWindow = new BrowserWindow({
   width: 800,   
   height: 600,  
   webPreferences: {
     nodeIntegration: true // web页面是否可以使用node模块
   }
 })

   // 加载index.html文件 这是通过直接加载文件的形势也可以用loadURL
   //   mainWindow.loadFile('index.html')
 mainWindow.loadURL(`file://${__dirname}/index.html`)
   // 打开开发者工具
   win.webContents.openDevTools()

   // 当 window 被关闭，这个事件会被触发。
 mainWindow.on('closed', function () {
   // 取消引用 window 对象，如果你的应用支持多窗口的话，
   // 通常会把多个 window 对象存放在一个数组里面，
   // 与此同时，你应该删除相应的元素。
   mainWindow = null
 })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', function () {
   if (process.platform !== 'darwin') app.quit()
 })

配合vue或react单页面应用搭建项目

使用vue脚手架生成渲染进程部分

// 全局安装脚手架
npm install --global vue-cli
// 生成vue web项目目录
vue init webpack test

// 把webpack配置文件的config /index.js 下的build的assetsPublicPath绝对路径改成相对路径

// 更改完路径 还有可以通过electron运行起来就可以打包了
// 打包需要安装 electron-packager
npm i -D electron-packager
// 在package.json 设置打包路径跟打包环境图标等等 也可以使用electron-builder 
// 记着引入package.json main设置入口文件 还有文件打开路径根据环境不同设置加载的页面路径不一样

electron-packager ./dist --out ./www  --overwrite  --platform=win32 --arch=x64