关于前端:electronvue技术篇

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

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

举荐应用第二种办法