一份针对于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 -gnpm 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上下载额定工具，工夫老本较高

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

举荐应用第二种办法