手把手教你 Electron + Vue 搭建前端桌面应用

一、在使用 Electron 之前我们要了解 Electron 是什么？

Electron 官网地址 点此 : electron 官方地址

Electron 相当于一个浏览器的外壳 , 我们将 编写的 HTML , CSS , Javascript 网页程序 嵌入进 Electron 里面

以便于在桌面上进行运行。 通俗来讲它就是一个软件 ， 如 QQ 、网易云音乐、优酷视频 等等。功能至强大

超乎你的想象

二、开发环境的准备

1. 安装 Node.js 坏境

   Node.js 官网地址 点此 node.js 官方地址

2. 安装 Vue Cli

   npm install -g @vue/cli
   

3. 安装 淘宝镜像 cnpm ( 因 electron 包 特别大 本人尝试过 npm 或 yarn 的 方法 需要等待很长时间 )

4. 全局安装 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