作为一名前端工程师，大家应该对于Electron都有所耳闻，毕竟大名鼎鼎的vscode就是用这个框架进行开发的。这个框架是基于Chromium和Nodejs，将浏览器变成了应用程序，使得开发一个桌面应用对于前端工程师来说变得更加轻松。
入门
入门的话可以参考官方的demo以及quickstart。需要注意的是国内在对这两个文件夹执行npm install时会因为网络原因出现错误，因此需要设置一下镜像源：
npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
然后就可以查看官方的两个入门应用啦！（建议在windows系统下进行，我在ubuntu下npm install半天都不成功）
与Vue的结合
首先确保你已经全局安装了vue命令行工具：
npm install -g vue-cli
然后通过该工具进行项目的创建：
vue init simulatedgreg/electron-vue project-name
该命令执行需要很多的依赖，可以参见官方给出的提示。我的windows因为经常搞这些玩意，所以并没有报错，于是很顺利的进入到了下一步。
npm run dev
正常情况执行该命令即可跑起应用程序，但是我报错了：
经过网上的查询发现：当node版本大于12的时候使用electron-vue项目就会报该错误。
解决方案：
根据报错信息我们可以看出是Html Webpack Plugin这个插件出了问题，于是我们打开根目录下的.electron-vue文件夹，找到webpack.renderer.config.js和webpack.web.configjs两个webpack的配置文件，里面可以看到有new HtmlWebpackPlugin的代码片段，在这段代码中添加如下代码：
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
修改后如下所示：
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
nodeModules: process.env.NODE_ENV !== 'production'
? path.resolve(__dirname, '../node_modules')
: false
}),
最终结果：
与React的结合
以下仅摘抄自electron-react-boilerplate，因为本人主要使用Vue进行开发，故未做测试。
首先克隆仓库：
git clone --depth 1 --single-branch https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name
然后进入目录，执行yarn安装依赖。最后yarn dev即可跑起。
写在后面
最近参加了学校的青柚工作室前端面试，过了一面，二面目前结果不知。一面总体表现还是可以的，一面的收获：前端模拟数据----api blueprint。这个确实是我没想到的，事后查了一下；还有就是自己对于知识点的理解虽然到位，但是表述能力还是有很大的欠缺，并不能完整的将自己所知道的说给对方听（可能有点紧张）；还有就是常用的api背的不够熟。
二面的收获：二面感觉不像一面时的气氛了，一面的时候气氛是比较轻松的，总共四个人左右，大家都开着视频，感觉还是挺活跃的。到了二面一进会议也是4个人，他们三个都没开视频，就我一个人开着摄像头，感觉很尴尬。然后面试我的应该是主席（一面的应该是技术），所以感觉就有点严肃，这和我的逗比性格就不太符合，所以面试的时候一些痛点、弱处也是被狠狠指出：（1）、没有自己独立做过一个项目；（2）、对于Vue只是停留在会用这一层次，对于源码的理解还是远远不够；（3）、绩点不行。
下面一段时间就要针对这些弱点进行弥补了。
