windows下vue3+electron的环境搭建

项目初始化

基于vue3+electron开发桌面应用。

环境准备

windows从零新建一个vue3+electron的项目说明，包括各种环境安装。

1. 安装npm

• npm的安装可以直接使用官方的.exe文件¹。

• 当然也可以使用nvm²进行安装，相比起来更方便，还可以进行npm的版本管理。

  nvm安装完毕以后，打开命令行，安装node版本V16（V18版本在安装electron时会有openssl-legacy-provider问题，比较难解决）。

  1 2	nvm install 16 nvm use 16

2. 安装vue-cli

   1	npm install -g @vue/cli

3. 安装electron

   1	npm install electron --save-dev

   安装过程中可能会遇到下载失败的问题³，解决方法如下：

   1	npm config edit

   修改.npmrc文件配置并保存。

   1 2 3

   registry=https://registry.npmmirror.com electron_mirror=https://cdn.npmmirror.com/binaries/electron/ electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

新建架构vue3+electron

vue3+electron环境初始化⁴步骤如下：

1
2
3
4
5

# 新建vue项目，myproject为项目名称，只能小写
vue create myproject
cd myproject
# 添加electron
vue add electron-builder

1
2

# 项目启动
npm run electron:serve

项目共享

当与他人共享源码时，不需要拷贝/node_modules和/dist_electron文件夹以及package-lock.json文件。
由于npm环境不同，很可能导致不必要的错误，它们直接由以下命令生成。

1
2

# vue和electron安装完毕后
npm install

References