Vue3项目整合Electron

Vue3项目整合Electron

第一步安装：VUE3

安装vue3脚手架

npm install -g @vue/cli

安装 yarn，并设置淘宝源

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

设置ELECTRON_MIRROR,加速electron的预编译

npm config set ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

设置npm的淘宝源

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

查看设置

yarn config get registry
npm config get registry

第二部分：启动vue3的图形界面，创建项目

命令行输入：

vue ui

会自动启动浏览器打开下图界面：

创建项目：

下一步：

下一步：

最后安装插件：

安装electron-builder:

搜索安装

安装完成后，点击“安装完成”，（必须要点击安装完成，否则项目架构会出问题）

第三部分：运行项目

将入项目目录，执行命令

yarn run electron:serve

下图就是运行成功之后。

第四部分：打包应用

在项目的根目录，执行命令

yarn electron:build

在这个过程中会出错：

因为国内的github被墙了，所以需要手动下载：

如何加快github下载速度，可以参看我的另一个篇博客：​​增加github访问和克隆速度​​

​​nsis-resources-3.4.1.7z​​​​winCodeSign-2.5.0.7z​​

将这两个解压放到，目录​​C:\Users\自己的用户名\AppData\Local\electron-builder\Cache​​下有两个文件夹：

放的位置：

再次执行上面的命令就OK了！最后会在项目的根路径的​​dist_electron​​之下生成应用。