【2021年】通过vue-cli创建electron项目

1. 创建项目

vue create your-project-name

2. vue-cli添加electron-builder依赖

// 切换工作目录
cd vue3-electron/
// 添加依赖
vue add electron-builder

// !!! 请保证node版本>=14.0.0 否则会报错

其官网地址：Vue CLI Plugin Electron Builder (nklayman.github.io)

3. 添加UI依赖

// 这里选择使用的是bootstrap，你可以选择别的UI框架

yarn add bootstrap@next

// 如果您没有安装yarn, 请先
npm install -g yarn

4. 运行服务

yarn electron:serve

启动后长这样：

可以看出我们启动了一个标准的，基于vue构建的项目。

5. 依赖包补充

在electron中我们经常要进行渲染进程和主进程消息通信，需要使用 @electron/remote模块

yarn add @electron/remote

同时在background.js中添加以下两行代码。

6. 打包成exe安装包

yarn electron:build

之后，你打开 dist_electron 目录，就会发现里面有个.exe的安装包