苏南大叔在本文中,将要讲述的内容是:如何在window环境下,构建electron-vuedemo,在mac系统下,我们很容易就构建成功了。但是在windows下面,经常会有这样或者那样的各种问题。苏南大叔针对window环境下的构建,再进行特殊说明。前置文章阅读项目:

使用最新版node

到官方网站下载最新的node软件。保守的话,就下载左边的LTS版本,激进的话,就下载右侧的current版本。下载地址如下:

苏南大叔:win环境,构建 electron-vue范例的准备工作 - 001_node
win环境,构建 electron-vue范例的准备工作(图13-1)

安装git客户端

如果没有下载好git,可以到下面的地址下载:

当然如果您已经安装好了git的话,在命令行里面是能够识别出git命令的。比如:

苏南大叔:win环境,构建 electron-vue范例的准备工作 - git-command
win环境,构建 electron-vue范例的准备工作(图13-2)

否则,可能会遇到如下类似的错误提示信息:

苏南大叔:win环境,构建 electron-vue范例的准备工作 - electron-vue-git-error
win环境,构建 electron-vue范例的准备工作(图13-3)

详细安装过程,可以点击下面的链接查看:

使用管理员模式的powershell

这个也非常简单,powershell右键使用管理员模式就行了。不过,这个管理员模式的powershell,并不是必须的。普通的cmd也是一样一样的。只不过为了以防万一,给它个最大权限而已。

苏南大叔:win环境,构建 electron-vue范例的准备工作 - 002_powershell_admin
win环境,构建 electron-vue范例的准备工作(图13-4)

设置npmconfig

npm config set registry https://registry.npm.taobao.org/
npm config set electron_mirror http://npm.taobao.org/mirrors/electron/

这里强烈建议大家看一下下面两篇相关文章。

苏南大叔:win环境,构建 electron-vue范例的准备工作 - 003_npm_config
win环境,构建 electron-vue范例的准备工作(图13-5)

安装vue-cli

npm或者yarn全局安装即可。

npm install -g vue-cli

苏南大叔:win环境,构建 electron-vue范例的准备工作 - 004_npm_vue_cli
win环境,构建 electron-vue范例的准备工作(图13-6)

重点,安装windows-build-tools

这个是在electron-vue文档里面,特别提及的注意事项:

安装脚本如下:

npm install --global --production windows-build-tools

苏南大叔:win环境,构建 electron-vue范例的准备工作 - 010_tools_install
win环境,构建 electron-vue范例的准备工作(图13-7)

苏南大叔:win环境,构建 electron-vue范例的准备工作 - 011_tools_install_2
win环境,构建 electron-vue范例的准备工作(图13-8)

苏南大叔:win环境,构建 electron-vue范例的准备工作 - 012_tools_install_3
win环境,构建 electron-vue范例的准备工作(图13-9)

这个工具包的安装,特别要求使用管理员权限的powershell。否则就会看到如下类似提示哦。

苏南大叔:win环境,构建 electron-vue范例的准备工作 - powershell
win环境,构建 electron-vue范例的准备工作(图13-10)

关闭数字公司家的产品

如果不关闭的话,给你提示阻拦还好。实践证明,数字公司的软件,还会默默阻拦相关操作。当你的命令行莫名的卡住不动,或者类似死循环的时候,请考虑关闭,数字公司的软件。

苏南大叔:win环境,构建 electron-vue范例的准备工作 - 029_error_360
win环境,构建 electron-vue范例的准备工作(图13-11)

调整命令行的编码

为了避免在编程的时候,在命令行里面看到一些方块的乱码。大家最好调整一下命令行的编码。临时调整的方式是:

chcp 65001

苏南大叔:win环境,构建 electron-vue范例的准备工作 - command_git_error
win环境,构建 electron-vue范例的准备工作(图13-12)

苏南大叔:win环境,构建 electron-vue范例的准备工作 - command_git_error2
win环境,构建 electron-vue范例的准备工作(图13-13)

如果想要个永久好用的调整方式,可以点击这里查看。

结论

如上所述,是可能是在window下面进行构建的必要步骤。大家自行查看即可。更多苏南大叔提供的electron的相关内容,请点击这里查看。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron    vue

本站的忠实读者小伙伴,正在阅读下面这些文章: