前言
本人前端一枚,工作了四五年了,以前一直在做传统的web。后来从博客上了解到electron可以做跨端应用。有些小激动,就想试试,自己也是第一次学习electron-vue,一边学习一边总结吧!
文档支持:
介绍
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()方法,我们只要放开即可。