electron使用小结

electron结合vue脚手架:

1. vue create my-electron-vue
2. 安装electron依赖
3. 在package.json文件夹中配置： { "main": "main.js", "scripts": { ..., "electron": "electron ." } }
4. 在package.json同级目录添加mian.js文件夹，基础代码如下代码片段
5. yarn serve
6. yarn electron

const {app, BrowserWindow } = require('electron')
function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 700,
    height: 700,
    webPreferences: {
      nodeIntegration: true, // 开启Node 模块
    }
  })
  mainWindow.loadURL('http://localhost:8080/')
}
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

定制头部导航：

1.在主进程中设置frame：false  

const mainWindow = new BrowserWindow({
    frame：false
})

2.在渲染进程中自定义头部导航样式同时设置拖拽样式（css）
  最外层容器设置drag之后点击事件会失效，把需要监听click事件的dom元素css设置为'no-drag'

<style>
.header-container {
	-webkit-app-region: drag;
}
.header-container-li {
	-webkit-app-region: no-drag;
}
</style>

更改代码保存之后自动刷新页面（热加载）:

1.安装：

	yarn add --save-dev electron-reloader；

	npm install --save-dev electron-reloader ；

2.调用：
	主渲染进程main.js中
	const  reloader = require('electron-reloader')
	reloader(module)   // module是node.js中的全局对象