前言
一直想做一个客户端应用，把electron实践一下，因为项目中有用到vue现成的组件库，所以在想可不可以将electron和vue一起使用，后来了解到electron-vue，也为之后的要走的路扫平了障碍。
electron-vue开发应用
electron-vue结合了vue-cli和electron，可以方便的使用vue进行electron应用的开发。
electron-vue项目的创建
1
2
3
4
5
6
7
8
| # Install vue-cli
npm install -g vue-cli
vue init simulatedgreg/electron-vue my project
# install dependencies and run your app
cd my-project
yarn # or npm Install
yarn run dev # or npm run dev
|
项目工程目录
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| ├── build // 构建相关
├── dist // 配置相关
├── src // 源代码
│ ├── main // 进程相关设置
│ ├── index.js // Electron主进程设置
│ ├── index.dev.js // 进程设置
│ ├── assets // 图片 样式等静态资源
│ ├── models // 接口相关
│ ├── renderer // 业务组件相关
│ ├── assets // 组件相关静态文件（图片等）
│ ├── components // 页面级别以及全局组件
│ ├── router // 页面路由
│ ├── store // 数据相关设置
│ ├── views // 视图层
│ ├── App.vue // 入口页面
│ └── main.js // 入口 加载组件 初始化等
├── static // 第三方不打包资源
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── index.html // html模板
└── package.json // package.json
|
Electron设置
主进程
主进程通常是每一个Electron应用程序的入口。它控制着应用程序的生命，从打开到关闭。它还调用本地元素并创建应用程序中的每个渲染进程，其中内置完整的Node Api。
Main进程主要通过Node.js、Chromium和Native Apis来实现一些系统以及底层的操作，比如：创建系统级别的菜单、操作剪切板、创建APP的创建APP的窗口等。
主进程在src->main->index.js文件
- 通过BrowserWindow可以创建和控制浏览器窗口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({ // 设置窗口相关属性
height: 563,
useContentSize: true,
width: 1000,
center: true,
})
mainWindow.loadURL(winURL)
// 设置窗口关闭事件
mainWindow.on('closed', () => {
mainWindow = null
})
createMenu() // 菜单设置项
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| // 菜单选项设置
const createMenu = () => {
if (process.env.NODE_ENV !== 'development') {
const template = [{
label: 'Edit',
submenu: [
{ label: 'Cut', accelerator: 'CmdOrCtrl+X', selector: 'cut:' },
{ label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
{ label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' },
{ label: 'Select All', accelerator: 'CmdOrCtrl+A', selector: 'selectAll:' },
{
label: 'Quit',
accelerator: 'CmdOrCtrl+Q',
click () {
app.quit()
}
}
]
}]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
}
}
|
具体请参考：Electron APIs列表
Renderer进程
Renderer进程主要通过Chromium来实现APP的图形界面，也就是前端开发部分，不过在Electron下可以使用一些Node模块（如FS）和一些在Main进程里能用的东西（如：Clipboard）
Renderer相关开发使用我们熟悉的Vue框架，因为Electron-vue已经帮我们将vue引入进来，我们只需在src->renderer下进行相关vue开发就可以，在设置好主进程后界面开发就像我们直接写页面一样简单。
打包
当页面开发和调试完毕，需要将页面打包成可执行程序（在项目生成时已经确定之后要打包生成的应用程序格式：windows格式还是Mac下执行模式），因此需要进行打包，应用的相关信息需要在packa.json中进行设置。
打包后在项目目录下生成build文件，build->win-unpacked文件夹即是打包生成的可执行文件，现在可以直接双击运行文件下的*.exe文件。
总结
electron开发难点其实在与main进程开发，需要我们及时查阅Electron APIs列表，而且需要对Node有一定了解，因此我们在开发时需要什么就查什么，难点自然就解决，对自己也是一个提升的过程。
