Electron-Vue之安装流程

近期摒弃了熟悉的WPF,选用了新的一套工具(Electron-Vue)来开发桌面软件。(我是连html都没用过的猿,^no zuo no die^)。
接触新的东西,往往都碰到不少问题,记录下踩过的坑,以及正确姿势该如何打开,为猿类们提供借鉴。

下面介绍下正确的Electron-Vue安装流程:

《目录》

  1. 安装流程
    1.1. node.js和npm安装
    1.2. 淘宝镜像安装
    1.3. electron安装
    1.4. vue安装
    1.5. 创建脚手架
    1.6. 下载依赖文件
    1.7. 运行项目
  2. 问题解决
    2.1. 问题描述
    2.2. 解决方案
1.安装流程

以下是基于windows-64系统上进行安装。

1.1.node.js和npm安装

安装包下载官网:https://nodejs.cn/download/,选择最新的长期支持版本下载即可。
在这里插入图片描述
安装node时,一直选择默认的即可。如果要更改安装路径,安装完成后,记得更改系统变量的path。
在安装node的时候,npm也会同时安装了。确认node和npm的版本的方法是,在命令行中分别输入指令:node -vnpm -v 。如能正常获取到相应的版本号,即说明安装成功。
这时候安装的npm版本未必是最新的,可以通过指令进行升级,以下两条指令均可升级:
npm install -g npmnpm update -g
在这里插入图片描述

1.2.淘宝镜像安装

首先说明下,该步骤可先跳过,直接进入1.3节,先尝试是否可以直接访问国外服务器,如果失败了,也就是被墙了的话,就走这一节的流程。
当然了,直接走这步也没事,免得折腾。
有两种处理方式方式,一种是用淘宝制作的cnpm镜像,另一种是配置注册到淘宝镜像路径上的。下面分别说明两种方式的处理方法:
1.直接采用cnpm
再次说明下,cnpm是淘宝制作的,是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),其官网:https://npm.taobao.org/
OK,怎么安装cnpm,命令行执行:

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果执行到某阶段卡住很长时间都没有log打印的话,那就退出重来吧,以下第一次执行卡了十几分钟都没反应后,退出重新执行,很快就成功的。
在这里插入图片描述
然后再确认下cnpm是否装成功,指令:cnpm -v
在这里插入图片描述
特此提醒:如果用此方式安装,后续的指令都要将npm换成cnpm。
效果:该方法不见得没有问题,我在办公电脑上用这方法安装,在1.6节的那一步一直都失败,但在自用PC上是顺利安装成功的。具体失败问题,请见第2章的问题解决。
2.仍保留npm
借用注册的淘宝镜像路径来安装,配置该注册的指令:

npm config set registry https://registry.npm.taobao.org

确认是否注册成功:

npm config get registry

在这里插入图片描述
效果:前面遇到的下载依赖文件失败问题,就是用这种方式解决的。请见第2章的问题解决。

1.3.electron安装

提示:如果前面是用cnpm,本节中的npm必须替换为cnpm,具体指令中不再标明。
本节和1.4节顺序可调换。
安装electron指令:npm install -g electron
确认是否安装成功:electron -v
在这里插入图片描述
到此即可下载个demo来运行了,基于electron的,看是否可以正常编译和运行。
编译的指令:electron .
在这里插入图片描述

1.4.vue安装

提示:如果前面是用cnpm,本节中的npm必须替换为cnpm,具体指令中不再标明。
如果是要用vue框架,就需要安装vue,指令:npm install -g vue-cli
确认是否安装成功,指令:vue
在这里插入图片描述

1.5.创建脚手架

创建个脚手架(或者叫模板)指令:vue init simulatedgreg/electron-vue xxx(project)
我创建一个vuelder的项目,即为:vue init simulatedgreg/electron-vue helloworld
在这里插入图片描述

1.6.下载依赖文件

提示:如果前面是用cnpm,本节中的npm必须替换为cnpm,具体指令中不再标明。
先切换到项目路径,下载依赖文件的指令为:npm install
如果下载成功,命令行中打印有以下信息,而且项目文件中会多出node_modules文件夹,该文件夹中文件就是各种依赖文件。
这一步走的很艰难,用cnpm的方式在这个阶段一直下载不成功,问题是如何解决的,见第二章的说明。
在这里插入图片描述
在这里插入图片描述

1.7.运行项目

提示:如果前面是用cnpm,本节中的npm必须替换为cnpm,具体指令中不再标明。
安装成功后就可以运行了,指令是:npm run dev
然后弹出界面:
在这里插入图片描述

2.问题解决
2.1.问题描述

安装这套环境碰到的最大最持久的问题,就是在第6步,即1.6节下载依赖文件遇到的问题。到目前,还不明确,该问题是不是属于网络超时问题。
我是在直接采用 npm 来下载 electron 或 vue-cli 失败的情况下,选择了安装淘宝镜像,即1.2节中的第1种方法。
但是,在cnpm install执行时,出现 Error [ERR_STREAM_WRITE_AFTER_END],问题表现如图所示:
(写这篇博文前,求助过同类,但没有得到解决方案,需要了解见详细问题
在这里插入图片描述

2.2.解决方案

该问题困扰了好几天,网上查找时发现,出现此类问题帖子只有两例,而都没有答案。尝试过的方式有:
1、尝试更改Urllib.js种的timeout时间,由5s改为10s,仍失败。
2、开放433端口,好吧,仍失败
3、网上有说新版本可能不稳定,然后降低npm版本,仍失败。
4、OK,终于尝试到成功的方法了。
① 同事提醒说npm应升级,原来node安装包中带的npm不是最新版的,OK,升级到新版本: npm install -g npm,始终升级不了。好吧,可能版本太低了,跟node配合不了,卸载node重装。
② 重装后,升级node,升级指令:
npm install -g npm 或者 npm update -g
③ 这node的重装,是得所有都要重新走一遍,也就是前面的步骤。但是,第2步改为使用npm而非cnpm,要配置注册到淘宝镜像,注意不是使用cnpm。方法是使用以下指令配置:

npm config set registry https://registry.npm.taobao.org

一路走下去,畅通无比,只是公司网速真的堪忧。
开心,终于见到你(复用该照片,因为高兴啊^^)
在这里插入图片描述

©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值