前言
前几天在水掘金的时候，无意间看到“玩具车”大佬的《我在阿里是怎么工作的——写在阿里入职一周年》，对四象限分析着了迷，然后想在市面上找现成的todo软件，没找到，于是，就自己做一个吧！
一、物料准备
- electron 12
- node 14.17.2
- Vue2
- Vue-cli 4.5.9
二、万事开头难：搭建脚手架
electron-vue脚手架太古老了，这里直接用Vue-cli4+vue-cli-plugin-electron-builder来完成项目搭建。
- 使用vue-cli完成项目创建
- 添加vue-cli-plugin-electron-builder：vue add vue-cli-plugin-electron-builder，选择electron12 在这个过程中，一般不会出错；完成之后，会在目录里生成一个background.js文件，这是electron的入口文件。
同时，package.json文件中会多出两条命令：electron:serve开发模式、electron:build打包
三、中间难：用Electron完成一个壳子
这个壳子要实现的功能如下：
- 最大化
- 最小化
- 关闭到托盘
- 托盘功能
1、改造窗口：
frame设置为false，去除原生工具框；enableRemoteModule设为true，是为了使用remote，方便子进程和主进程通信；
2、自定义头部组件
头部组件（Header.vue文件）实现了最大化、最小化、关闭三个功能。
引入remote，获取当前主进程对象
import { remote } from 'electron'
const win = remote.getCurrentWindow()
最大化、最小化、关闭：
// 最小化
minimize() {
win.minimize()
},
// 最大化
maximize() {
if (win.isMaximized()) {
win.unmaximize()
} else {
win.maximize()
}
},
// 关闭
close() {
this.$confirm('此操作将退出播放器, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
// win.destroy(); //这里之前用的是close，发现并不管用，用destroy就好使
win.hide()
})
.catch((e) => {
console.log(e)
})
}
3、实现托盘功能
在background.js文件中，引入path、Tray、Menu
在ready事件中，进行处理：
app.on("ready", async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
// await installExtension(VUEJS_DEVTOOLS);
} catch (e) {
console.error("Vue Devtools failed to install:", e.toString());
}
}
createWindow();
tray = new Tray(path.join(__dirname, '/favicon.ico'))
tray.setToolTip('todo') // 鼠标放上去显示的文字；
// 托盘左键控制显示隐藏
tray.on('click', () => {
// 点击图标的响应事件，这里是切换主窗口的显示和隐藏
if (win.isVisible()) {
win.hide()
} else {
win.show()
}
})
// 右键：
tray.on('right-click', () => {
const menuConfig = Menu.buildFromTemplate([
{
label: '退出',
click: () => win.destroy()
}
])
tray.popUpContextMenu(menuConfig)
})
});
四、结尾难：用element完成内容
UI如图所示，在此，特别鸣谢我的UI朋友，拯救了我的审美。
- table内容存储于本地localStorage中
- 点击进度、分数可进行编辑；
- 右上角点击新增；
- 扩展信息展示：创建时间、投入时间；
五、坑点
- tray对象要设为全局变量，如果为局部变量，会被垃圾回收，导致托盘图标闪一下就消失。
- 安装VUEJS_DEVTOOLS失败，你需要kexue上网，我的朋友；当然，可以直接注释掉这个插件。
- __dirname路径:在此系统中，__dirname指向dist_electron。
- 发现electron12这一版，close事件不起作用，使用destroy代替。
- 打包过程中，无法下载electron，github网络不稳，下载不下来。可以使用环境变量：淘宝镜像。
6.开发过程中，发现node全局变量报错；解决方案：在vue.config.js中添加如下配置：
