从0开始安装electron-vue之旅

一、安装node.js

直接下载稳定版本。

打开安装包，一路向下。

在安装的目录下新建两个文件夹：node_cache、node_global

npm config set cache "X:\xxxx\node_cache"
npm config set prefix "X:\xxxx\node_global"

可以通过npm config list查看修改是否成功。

修改镜像源：npm config set registry https://registry.npm.taobao.org

查看镜像源：npm config get registry

 

最后再检查一下node.js所安装的目录是否在环境变量中配置好了。

见下图，即成功。

 

二、安装vue-cli，见 https://cli.vuejs.org/zh/guide/installation.html

npm install -g @vue/cli

使用vue -V查看版本，如果遇到显示：vue不是内部或外部的命令，

需要找到vue.cmd得所在目录，也就是上面我们安装node.js时，新建的node_global文件下，将这个文件夹路径配置到环境变量中，即可。

见下图，即成功。

三、安装好vue脚手架之后，安装electron-vue的样板代码，可以查看官方文档

vue init simulatedgreg/electron-vue my-project

# 安装依赖并运行你的程序
cd my-project

npm install

npm run dev

到这一步，基本上就完成了第一次electron-vue的项目安装和启动。

 

PS：但是我安装完成之后，遇到下面的情况。修改代码后热更新是OK的，但是隔几秒就会出来这样的一个请求错误。查询了很多资料都没有成功，修改了很多次webpack.renderer.config.js文件下面的devServer配置，都没有成功。

经过分析，我个人得出一下结果，不知是否准确，但是有效，如果理解有误，有大佬看到希望可以指点一下，嘿嘿嘿

 

electron-vue样板工程中使用了:webpack-dev-server、webpack-hot-middleware这两个插件。

然后webpack官方说到：

所以我找到项目中对应代码，进行了注释，事实成功了，控制台不再报错。