一、在使用 Electron 之前我们要了解 Electron 是什么?
Electron 官网地址 点此 : electron 官方地址
Electron 相当于一个浏览器的外壳 , 我们将 编写的 HTML , CSS , Javascript 网页程序 嵌入进 Electron 里面
以便于在桌面上进行运行。 通俗来讲它就是一个软件 , 如 QQ 、网易云音乐、优酷视频 等等。功能至强大
超乎你的想象
二、开发环境的准备
-
安装 Node.js 坏境
Node.js 官网地址 点此 node.js 官方地址
-
安装 Vue Cli
npm install -g @vue/cli
-
安装 淘宝镜像 cnpm ( 因 electron 包 特别大 本人尝试过 npm 或 yarn 的 方法 需要等待很长时间 )
-
全局安装 Electron
cnpm install electron -g //如果安装还是 特比慢 或 不想安装cnpn 可以联系我们
查看 是否安装成功 :
三、 搭建 vue 环境
1. 首先使用 vue-cli 搭建基础 vue框架
和平时写 vue项目一样 选择自己需要的
cd electron-demo 进入项目目录
yarn serve 启动项目
四、vue项目中添加 electron 模块
输入 vue add electron-builder 后 按下回车
安装过程中 此处我们选择 ^13.0.0 按下回车
因 electron 安装时间过长 导致安装失败
解决办法 直接使用 cnpm install 进行安装
安装 完成后 我们使用 npm run electron:serve 运行项目 依旧是报错的。请耐心往下看完
此处 我们需要打开项目的目录 找到 node_modules 下的 electron 。 删除 这个文件以后 重新使用 cnpm install
至此。 electron 应用 已经搭建完成。 我们使用 npm run electron:serve 进行启动项目 ( windows 与 imac 一样 )
已经完美运行成功 可以看到桌面已经弹出 electron-demo 应用
五、查看electron+vue 项目目录
相比于 基础 vue 项目 我们可以发现在目录中 多出一个 background.js 文件
此处可以 配置 electron 应