【桌面应用程序】Vue-Electron 环境构建、打包与测试（Windows）

前言

Vue 与 Electron 环境构建、打包与测试。

目录

前言

一、基本环境准备

二、配置npm源

三、创建Vue项目

四、添加Electron支持

五、应用启动

​六、添加UI框架 ElementUI

​七、打包

---

一、基本环境准备

• npm版本：8.6.0
• node版本：v18.0.0
• Vue/cli版本：@vue/cli 5.0.8
• IDE：WebStorm

node环境与Vue环境安装略。

node直接去Node.js — Run JavaScript Everywhere下载即可。

全局安装vue使用以下命令。

npm install -g @vue/cli

二、配置npm源

为避免下载过程中因网络问题导致失败，首先确认npm源。

npm config list

# 我的结果
disturl = "https://mirrors.huaweicloud.com/electron-builder-binaries/"
electron_builder_binaries_mirror = "https://mirrors.huaweicloud.com/electron-builder-binaries/"
electron_mirror = "https://mirrors.huaweicloud.com/electron/"
registry = "https://registry.npmmirror.com/"

如何设置

npm config set disturl = "https://mirrors.huaweicloud.com/electron-builder-binaries/"
npm config set electron_builder_binaries_mirror = "https://mirrors.huaweicloud.com/electron-builder-binaries/"
npm config set electron_mirror = "https://mirrors.huaweicloud.com/electron/"
npm config set registry = "https://registry.npmmirror.com/"

以上地址测试与 2024年11月16日。当然也可以用taobao的electron源。