Electron入门以及与Vue、React的结合

为一名前端工程师,大家应该对于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

正常情况执行该命令即可跑起应用程序,但是我报错了:

5.png

经过网上的查询发现:当node版本大于12的时候使用electron-vue项目就会报该错误。

解决方案:

根据报错信息我们可以看出是Html Webpack Plugin这个插件出了问题,于是我们打开根目录下的.electron-vue文件夹,找到webpack.renderer.config.jswebpack.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
}),

最终结果:

6.png

与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)、绩点不行。

下面一段时间就要针对这些弱点进行弥补了。

加载评论