前言

本人前端一枚，工作了四五年了，以前一直在做传统的web。后来从博客上了解到electron可以做跨端应用。有些小激动，就想试试，自己也是第一次学习electron-vue，一边学习一边总结吧！

文档支持：

electron API文档

介绍

electron 是一个可以使用 web 技术来创建跨平台原生桌面应用的框架。vue-cli3.0后可以用

vue-cli-plugin-electron-builder 以插件化得方式构建 electron 应用

优点：

跨平台
有现成的API可以直接调用底层，有前端经验的上手快。
社区活跃，大部分问题都可以在github issues、Stack Overflow里得到答案

缺点：

应用体积过大。由于内部包装了Chromium和Node.js，使得打包体积（使用electron-builder）在mac上至少是45M+起步，在windows上稍微好一点，不过也要35M+起步。不过相比早期打包体积100M+起步来说，已经好了不少。不过解压后安装依然是100M+起步。
底层的API支持度有限，没有API支持功能就无法实现。
开发重量级应用存在性能问题

搭建项目

#安装vue cli3脚手架，另外如果全局安装了旧版本的 vue-cli，请卸载npm uninstall vue-cli -g，已经全局安装过请忽略！！！
npm install -g @vue/cli

vue create my-project

#推荐安装方式,这一步安装很慢，经常会卡死，要多试几次
vue add vue-cli-plugin-electron-builder

#因为npm下载很慢，网络问题，有的包可能会下载不下来，这边换成cnpm
cnpm install -g electron-package

cnpm install -g electron-builder

#编译打包
npm run electron:build

安装 vue-cli-plugin-electron-builder 会提示选择electron版本。默认就看最新的版本选择，具体为啥不清楚 ==！

接下去会继续安装，有可能会出现报错，提示installVueDevtools未被使用，在src目录下会有一个background.js, 默认会注释installVueDevtools()方法，我们只要放开即可。

运行结果