electron+vue+typescript+element搭建桌面应用(一)

4,084 阅读2分钟

前言

本人前端一枚,工作了四五年了,以前一直在做传统的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()方法,我们只要放开即可。

运行结果