electron-vue技术篇

一份针对于electron-vue项目整理的搭建、运行、打包过程的踩坑总结分享

首先为了保证安装效率，采用cnpm或者yarn指令来安装，前提是安装了node环境

安装全局yarn，最好设置淘宝镜像

npm install -g yarn

安装全局vue-cli

npm install vue-cli -g

安装3.0+版本vue-cli（现在最新已经到4.5.6版本）

npm install @vue/cli -g

若想更新vue-cli到最新版，要先卸载当前版本

npm uninstall vue-cli -g

创建electron-vue项目（方法一）：

1、安装2.0+版本vue-cli

npm install vue-cli -g

2、cmd打开F盘输入指令

vue init simulatedgreg/electron-vue my_project_name

根据自己项目需要设置项目内容

安装完成之后，项目导入编辑器，目录结构如下

3、yarn安装项目依赖

yarn install

时间长一点，耐心等待…

4、运行项目

npm run dev

看到可视窗口

5、项目打包

npm run build

下图中需要下载这个文件包，但是下载过程很漫长

打开连接下载压缩包

https://github.com/electron-userland/electron-builder-binaries/releases/tag/winCodeSign-2.4.0

之后压缩在C盘目录

C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign

再次打包，如见下图，则打包成功

打开项目build文件，就会看见 .exe安装包 和普通安装程序一样双击打开安装

创建electron-vue项目（方法二）：

1、升级vue-cli到3.0+版本，先卸载当前版本

npm uninstall vue-cli -g
npm install @vue/cli -g

2、同样cmd指到D盘，安装vue项目

vue create my_electron_vue

根据需要选择项目配置

如见下图，则安装成功

3、安装electron-builder 进入项目文件my_electron_vue，执行如下指令

vue add electron-builder

选择最新9.0.0

安装成功后，项目结构如下

main.js为vue主文件

background.js为electron的主进程文件

4、项目打包

npm run electron:build

打包成功

进入项目文件夹dist_electron中，electron_robot_client Setup 0.1.0.exe为项目安装程序

总结：

第一种方法框架更新较慢，在打包问题上需要从git上下载额外工具，时间成本较高

第二种方法比第一种更前卫，实现的方法也比较简单

推荐使用第二种方法