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

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

electron-vue技术篇_第1张图片
安装完成之后,项目导入编辑器,目录结构如下

electron-vue技术篇_第2张图片

3、yarn安装项目依赖

yarn install

时间长一点,耐心等待......

electron-vue技术篇_第3张图片

4、运行项目

npm run dev

看到可视窗口

electron-vue技术篇_第4张图片

5、项目打包

npm run build

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

electron-vue技术篇_第5张图片

打开连接下载压缩包

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

electron-vue技术篇_第6张图片

之后压缩在C盘目录

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

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

electron-vue技术篇_第7张图片

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

8.png

创建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

根据需要选择项目配置

electron-vue技术篇_第8张图片

如见下图,则安装成功

electron-vue技术篇_第9张图片

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

vue add electron-builder

electron-vue技术篇_第10张图片

选择最新9.0.0

electron-vue技术篇_第11张图片

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

main.js为vue主文件

background.js为electron的主进程文件

electron-vue技术篇_第12张图片

4、项目打包

npm run electron:build

打包成功

electron-vue技术篇_第13张图片

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

electron-vue技术篇_第14张图片

总结:

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

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

推荐使用第二种方法

你可能感兴趣的:(前端,electron,vue.js)