1.安装Electron+Vue开发环境

首先就是要完成开发环境的搭建工作，不用说，肯定要安装nodejs和npm，然后安装vue-cli3.0,安装vue-cli-plugin-electron-builder插件，关于这个插件的使用和安装，听折腾的，详情请收看我的另一篇文章： electron结合vue进行开发 这里面详细说明了我在win10上安装和启动electron和vue-cli3.0遇到的一系列的问题和解决方法。安装和启动成功之后，就可以使用vue进行开发了。把vue-cli3.0默认生成的Home和About删除。

2.Normalize.css

这个标准化css样式文件，我觉得还是有必要的，文件不大，但是可以屏蔽各种浏览器的差异化。官网上给出的安装方式，在我这里报错。

1
2
3
4
5
6
7
8
9
10

//错误安装
npm install --save normalize.css

//正确安装
npm i normalize.css --save
//or
yarn add normalize.css

//引入
import 'normalize.css';

3.设置圆角边框

在background.js文件中,修改窗口设置将其设置为透明，然后编写界面的css，body不要设置背景色，增加border-radius,并且要注意：关闭调试模式，否则看不出效果来。

1
2
3
4

win = new BrowserWindow({ width: 800, height: 600,frame: false,
    titleBarStyle: 'hidden',titleBarStyle: 'customButtonsOnHover',
    maximizable:false,minimizable:false,transparent:true,hasShadow:false
  })

4.添加可拖拽

主要是为可拖拽区域设置 -webkit-app-region: drag;对不可拖拽的元素设置 -webkit-app-region: no-drag;

5.自定义标题栏（进程通讯）

将窗口设置为透明窗体，然后通过添加html标签，在新建的html中创建标题栏，然后自定义添加自定义的放大、缩小和关闭按钮，渲染进程通过ipcRender.send发送事件给主进程，主进程通过ipcMain.on监听渲染进程发送的消息，执行想关的窗口放大、缩小、关闭事件。

主进程 (Main Process)
一个 Electron 应用只有 一个主进程。当我们执行 electron . 命令后， Electron 会运行当前目录(.)下的 package.json 文件中 main 字段指定的文件。而运行该文件的进程既是主进程。运行在主进程中的脚本可以通过创建一个窗口，并传入 URL，让这个窗口加载一个网页来展示图形界面。与创建 GUI 相关的接口只应该由主进程来调用。

1
2
3
4

import { ipcMain } from 'electron'
ipcMain.on("closedd",e=>{
  console.log(e);
})

渲染进程 (Renderer Process)
在Electron里的每个页面都有它自己的进程，叫作渲染进程。主进程通过实例化 BrowserWindow，每个 BrowserWindow 实例都在它自己的渲染进程内返回一个 web 页面。当 BrowserWindow 实例销毁时，相应的渲染进程也会终止。渲染进程由主进程进行管理。每个渲染进程都是相互独立的，它们只关心自己所运行的 web 页面。

1
2

import { ipcRenderer as ipc } from 'electron';
ipc.send('closedd');

注意事项
1.渲染进程中的事件名称可以自由定制，只需要在主进程进行相应事件名称的监听即可。
2.在主进程中只有一个ipcMain,但是在多窗口的情况下，ipcRenderer可能不止需要一个，这个时候如何区分是那个窗口发送的’close’事件呢？我想，只能通过给每个窗口关闭事件定义不同的名称来间接的区分主进程应该处理哪个窗口的事件。

6.关于透明无边框窗体window.isMaximized()始终返回false的解决方案

为了实现自定义的窗体放大和缩小按钮，一般是在渲染进程中使用ipcRenderer.send()发送一个事件，主进程监听事件，进行窗体放大和缩小。一般的代码是这样的写的：

1
2
3
4
5
6
7
8
9

ipcMain.on('min', e=> mainWindow.minimize());
ipcMain.on('max', e=> {
  if (mainWindow.isMaximized()) {
    mainWindow.unmaximize()
  } else {
    mainWindow.maximize()
  }
});
ipcMain.on('close', e=> mainWindow.close());

经过实验可以发现，在透明的无窗体的应用程序中，mainWindow.isMaximized()始终返回的是false，也就是说，mainWindow.unmaximize()这个代码是不执行的,bug反馈可以参考：github。解决方式是什么呢？主要思路是为btn-max按钮添加区分代码，最大化时添加icon-restore样式，程序判断，然后发送不同的消息给主进程，主进程通过判断传回的参数类型，进行放大或缩小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//渲染进程
winMaximize() {
  const { $el } = this;
  const btnMax = $el.querySelector('.btn-max');
  const { classList } = btnMax;
  if (!classList.contains('icon-restore')) {
    classList.add('icon-restore');
    ipc.send('max', 'max');
  } else {
    classList.remove('icon-restore');
    ipc.send('max', 'restore');
  }
}
//主进程
ipcMain.on('max', (e,arg)=> {
  if (arg == 'restore') {
    console.log('dds');
    win.unmaximize();
  } else {
    win.maximize();
  }
});

7.安装ElementUI

使用Vue开发，当然少不了ElementUI了。安装方式很简单：npm i element-ui -S即可。

1
2
3
4
5
6
7
8
9
10
11

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

问题出在按需引用这里。按照官网的说法，安装：npm install babel-plugin-component -D，然后修改.babelrc文件，vue-cli3.0没有这个文件怎么办，我自己新建了一个.babelrc文件，然后将代码复制进去了，结果：

运行不起来的，只能换另外一种方式了，element提供了vue-cli3.0的插件，可以通过vue add element来安装这个插件，在安装插件之前，一定要保存自己的提交，一定要保存自己的提交，一定要保存自己的提交，vue插件会修改你的文件结构，只能add插件，还不能通过remove卸载插件，所以在安装任何插件之前都要谨慎操作。

安装倒是没什么问题，最后成功了：

继续运行yarn electron:serve，出问题了

仔细观察下，提示模块未找到，查看src/App.vue才知道，原来他把我的文件全部都改了，就为了显示一个button,使用 git diff src/App.vue 可以查看具体改了哪些东西。

再次印证了使用vue安装插件前一定要执行git add .和git commit -m “”,否则后果不堪设想。知道原因了，那怎么办呢，只能把文件再找回啊。使用命令：git checkout – src/App.vue可以放弃element对App.vue文件的修改，同时不影响其他的安装，这里也不用单独引入css文件了，如果需要添加其他的element组件，只需要在plugins/element.js文件中按照官网方式Vue.use()引用相应组件即可。

8.使用ElementUI滚动条组件

为了有个良好的用户体验，滚动条就不能使用浏览器自带的滚动条了，虽然用起来很方便。用什么滚动条呢？因为我用了elementui组件，所以我选择了使用elementui隐藏的组件el-scroll,不知道基于什么原因，官方文档中没有这个组件，但是可以直接使用。

1
2
3
4
5
6

//按需引入
import { Scrollbar } form 'element-ui'
Vue.use(Scrollbar)
//使用
<el-scrollbar wrap-class="list" wrap-style="color: red;" view-style="font-weight: bold;" view-class="view-box" :native="false">
</el-scrollbar>

效果：

9.ElementUI滚动条横向滚动条

使用el-scroll滚动条，会有一个奇怪的现象，就是横向滚动条还是默认的样式

解决方法
通过添加.el-scrollbar__wrap{overflow-x: hidden;}可以解决这个问题。

10.打包

使用 electron-forge 进行打包。

1
2
3
4
5

## 安装
pnpm add  @electron-forge/cli -D

## 安装
pnpm electron-forge import

问题

（1）connect ETIMEDOUT 20.205.243.166:443

【尝试方案】
（1）在项目根目录新建 .npmrc，内容：

1

electron_mirror=https://npmmirror.com/mirrors/electron/

【解决方案】
使用 pnpm config set 配置

1
2
3
4

## 设置缘
pnpm config set electron_mirror https://npmmirror.com/mirrors/electron/
## 清空缓存
pnpm store prune