electron监听网页_electron开发采坑小记

发布于 2019-07-12

前言

前前前前段时间做了个桌面端的项目(这篇文章拖了挺久了)，功能大概是这样的：

项目左右两栏结构

左侧feed流信息展示

右侧webview打开一个网站

将左侧信息注入右侧网站中

需求很简单，提高运营效率的辅助工具，但是因为一些原因需要做成一个桌面端。

从前端一下子跨到PC桌面端开发，听起来跨度有点大，但在实际的开发中因为有了electron的加持，这一切都变的非常便利，丝毫没有跨度的痕迹，完全变成了web开发那一套，让人不禁感叹js生态的完善，就像有句话说的：

能用JavaScript书写的终将会用JavaScript书写。

实际上我并非直接采用electron，而是使用了更加懒人的electron-vue。通过这一工具将web开发那一套又转移到vue开发上，再辅以iview做UI，开发起来一下子高效了不少。

我们知道electron，但是electron-vue是个什么东西呢，我们还需要了解一下。这东西的官方介绍是这样的。

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.

从这个介绍大致可以看出来这是个基于vue-cli的使用vue开发electron应用的脚手架。可以帮助我们做不少的vue与electron之间结合的基础工作，让我们的开发更加便捷。那么我们就来看看使用electron-vue怎么做开发。我们先从基础的安装开始。

安装

我觉得这个步骤叫安装并不是很严谨，因为electron-vue并不是一个单独的npm包，而是vue-cli的一个模板配置。所以使用起来没有难度，可以按照官方文档的说明即可完成，只有两行命令。

# 安装 vue-cli 和 脚手架样板代码

npm install -g vue-cli

vue init simulatedgreg/electron-vue my-project

如此，我们便得到了一个初始化的electron项目，安装完依赖包就能开发了。初始化过程很简单，但是需要提示一些vue cli使用过程中需要注意的问题：

Vue CLI的包名称由vue-cli改成了@vue/cli，导致最新版的vue cli使用vue init命令会报错，而electron-vue的安装文档比较老旧，需要用vue init这个命令，我们可以用一个命令来做桥接：

npm install -g @vue/cli-init