使用 Vue 开发 Electron 桌面应用入门

缘起

上文简单介绍了 Electron,以及如何搭建环境来进行开发。现实开发中,从头开始使用 HTML5、JS、CSS 来构建应用毕竟还是一件苦差事。鉴于 Vue 是目前国内前端开发的主流技术栈之一,本文来趟一下如何使用 Vue 开发 Electron 桌面应用这个坑,减少一些大家搭建环境中可能会碰到的问题。

设置 npm 国内源

以下命令设置 npm 到国内的淘宝源地址。

$ npm config set registry https://registry.npm.taobao.org

验证一下:

$ npm config get registry
https://registry.npm.taobao.org

如果看到输出是 https://registry.npm.taobao.org,这表明设置成功的。

参考: npm配置国内源方法

设置 Electron 国内源

Windows

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

Mac

  • bash
echo "export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/" >> ~/.bash_profile
. ~/.bash_profile
  • zsh
echo "export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/" >> ~/.zshrc
. ~/.ashrc

安装 yarn【可选】

本文将使用 yarn 作为 Node.js 的包管理器。至于 npm 与 yarn 孰优孰劣,则仁者见仁、智者见智,不便评说。

官方推荐的安装 yarn 的命令如下:

$ npm install -g yarn

笔者在 Mac 上是使用 homebrew 安装的 yarn:

$ brew install yarn

目前的最新版本是 1.22.5。

$  yarn -v
1.22.5

homebrew 的国内源设置请参考 清华大学Homebrew/Linuxbrew 镜像使用帮助

安装 Vue CLI

本文将通过 Vue CLI 来安装 Vue.js,其他的安装方式可以参考官方的 Vue Installation

$ yarn global add @vue/cli
yarn global v1.22.5
[1/4] 🔍  Resolving packages...
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi@15.1.1: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-shared-utils > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi > @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-shared-utils > request > har-validator@5.1.5: this library is no longer supported
warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > nodemon > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > nodemon > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning @vue/cli > globby > fast-glob > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning @vue/cli > globby > fast-glob > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "@vue/cli@4.5.4" with binaries:
      - vue
✨  Done in 43.85s.

可以看到,当前 Vue CLI 的最新版本是 4.5.4。

$  vue --version
@vue/cli 4.5.4

注: Windows 下面推荐使用 npm 安装,否则有一定概率 vue 命令无法识别。 安装命令如下:

$  npm install -g @vue/cli

生成 vue 工程

使用 vue create 命令创建工程,选项保持默认(使用 vue 2)即可。

$ vue create electron-vue-demo
🎉  Successfully created project electron-vue-demo.
👉  Get started with the following commands:

 $ cd electron-vue-demo
 $ npm run serve

验证 vue 工程

$ cd electron-vue-demo
$ npm run serve
 DONE  Compiled successfully in 2379ms                                                                                                                                 

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.5:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

通过浏览器范围访 http://localhost:8080/,如果看到下图,说明工程创建成功。

vue-create-ok.png

添加 electron-builder 支持

$ vue add electron-builder
✔  Successfully invoked generator for plugin: vue-cli-plugin-electron-builder

Mac 系统下,如果该命令执行时间过长,可以尝试下面的命令:

$ ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" vue add electron-builder

运行开发版

执行以下命令,启动 dev server。

$ yarn electron:serve
或者
$ npm run electron:serve

运行的效果:


electron-builder-demo.png

打包

执行以下命令,进行打包:

$  yarn electron:build
OR
$  npm run electron:build

如果再 Mac 系统下,首次打包缓慢,也可以尝试以下命令:

$ ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" yarn electron:build
OR
$ ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"  npm run electron:build

Windows 系统下的加速操作(在上面设置过 electron mirror 的前提下):

  • 到 C:\Users<用户名>\AppData\Local\electron-builder\Cache 下面,建立 nsis 和 winCodeSign 两个目录。
  • nsis目录下, 将事先下载好的 nsis-3.0.4.1.7z 和 nsis-resources-3.4.1.7z 分别解压到子目录 nsis-3.0.4.1 和 nsis-resources-3.4.1 目录下 。
  • winCodeSign 目录下,将事先下载好的 winCodeSign-2.6.0.7z 解压到子目录 winCodeSign-2.6.0目录下 。
npm run electron:build

【Mac】打包后的文件如下:


electron-build-package.png

【Windows】 打包后的文件如下:


electron_打包.png

示例工程

示例工程可以从 github 上获取,地址是 electron-vue-demo

参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349