前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >electron-vue 制作 http 应用客户端

electron-vue 制作 http 应用客户端

作者头像
stormKid
发布2018-09-12 15:40:40
1.6K0
发布2018-09-12 15:40:40
举报
文章被收录于专栏:计算机编程

关于https声明:由于在制作过程中发现https重定向问题尚未解决,所以只将http客户端相关制作流程开源出来,让大家可以制作属于自己的http页面应用

1、搭建环境

1.1、 下载node点击下载最新版本 1.2 、下载vue-cli:

代码语言:javascript
复制
shell: npm install -g vue-cli || cnpm install -g vue-cli 

1.3、 windows环境下需要的Cmake环境: 点击此链接下载此工具

vs生成工具.png

2、构建项目

代码语言:javascript
复制
shell: vue init simulatedgreg/electron-vue my-project

注意:需要选择electron-packager 来直接构建自己的客户端应用,如果想持续构建那就选择electron-builder,更多配置问题请参考文档:electron-build 文档

注意.png

3、使用yarn导包

说明:这里为啥指明使用yarn,是因为在npm和cnpm下,install会出现electron依赖下载不了的问题,故推荐使用yarn 3.1、下载yarn

代码语言:javascript
复制
shell: npm install -g yarn || cnpm install -g yarn

3.2、导包

代码语言:javascript
复制
...\yourAppProject> yarn  // 说明:在项目目录下输入yarn即可

4、编译配置项目

4.1、修改index.ejs的错误 打开编译器过后发现index.ejs报错,如果不进行修改会让编译报错,此错误显示如下:

index的错误.png

如图所示对齐进行修改:

修改后.png

此BUG已提给官方,详情情况请看此issuse: https://github.com/SimulatedGREG/electron-vue/issues/514

4.2、配置index跳转

跳转配置.png

在此处配置html跳转,即可直接进入对应的url页面。

4.3、删除默认显示

项目目录.png

找到默认显示页面,为保险起见将此两页面内容删除,保留vue最外层标签,其余不变。

5、客户端生成

代码语言:javascript
复制
 shell: npm run build:win32 

说明:这里仅针对windows系统来进行客户端生成在package.json里配置有各种系统相对应的配置以及shell指令,如下图所示:

build配置.png

此时注意:会在如下图所示停滞2~5分钟,切勿ctrl+c或者关闭cmd,否则build失败

编译过程.png

构建完成:此时可以打开已经生成的应用查看了

build完成.png

查看生成的对应系统的应用

构建完毕的目录.png

打开应用即为跳转过后的页面(此处以QQ为例:http://www.qq.com

构建完成的应用.png

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.01.25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、搭建环境
  • 2、构建项目
  • 3、使用yarn导包
  • 4、编译配置项目
  • 5、客户端生成
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档