如何正确的安装Electron，并完成vue3+electron的环境搭建

前端菜鸟小康康

已于 2024-08-23 09:45:33 修改

阅读量1.3k

点赞数 29

于 2024-08-22 14:16:39 首次发布

本文链接：https://blog.csdn.net/weixin_72652226/article/details/141252954

版权

2.配置npm的淘宝镜像和Elecron的环境变量

3、运行Electron

OK了家人们下期我们再见

下课！！！

一、查看本机node和npm版本环境

1、node版本查看

使用 node -v 查看本机的node版本

出现版本号就表示本机的node是正常的，目前我一直用的都是18的版本还没有出现什么问题，如果使用其他版本出现问题，欢迎大家进行讨论。

2、npm版本查看

使用 npm -v 查看本机npm版本

在官网下载安装node的时候npm是跟随node同时下载的。

二、安装vite+vue3环境

首先在桌面或者你的项目文件夹目录中右键打开命令行黑窗口，或者在文件夹的地址栏中输入cmd打开命令行黑窗口。

在命令行中输入 npm create vue

然后根据提示一直按回车就可以了（ps:这里的相关配置我就不过多介绍了，这期主要讲vue+electron的配置依赖），出现以下提示就证明安装成功了。

cd vue-project

使用 npm install 安装vue的相关依赖

npm install

安装成功之后使用以下命令先跑起来看一下

npm run dev

根据生成的端口号输入到浏览器中能正常看到就可以了

三、配置electron的相关依赖

1、修改package.json

首先我们使用编辑器(vscode或者webstorm) 打开我们的项目目录。

打开之后我们在项目的根目录创建一个electron的文件夹。

创建完之后呢，我们打开vue的package.json，

{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
}

把代码复制到替换成 (ps:这里的 `description和author`可以随便写，`main`是electron主进程的文件)，然后保存就可以啦

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "./electron/main.js",
  "author": "Jane Doe",
  "license": "MIT"
}

在 scripts 新增一个electron的启动命令，

"start": "electron .",

2.配置npm的淘宝镜像和Elecron的环境变量

在项目根目录中右键打开命令行黑窗口，或者在文件夹的地址栏中输入cmd打开命令行黑窗口。

然后再命令行中根据以下命令进行输入

1.首先确保你的淘宝镜像是最新的

使用npm 查看镜像源：npm config get registry

查询的结果和我一样就可以了，如果不是就按照下方的命令进行设置。

2. 设置新的淘宝镜像源(如果存在相同的就跳过这一步)

npm config set registry https://registry.npmmirror.com/

3.配置npm中Elecron的镜像

npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

配置完之后然后直接 npm install electron -D 就可以下载下来相关依赖了，下载

我看网上很多人都卡在了下载安装的这一步，多半的原因就是因为没有安装新的淘宝镜像源和单独的配置Electron的环境镜像，所以一直都是报错网络异常的问题。

3、运行Electron

如果这时候你直接运行 `npm start` 的话就会弹出一个报错的提示框，那是因为咱们的相关依赖还没有完全配置完，所以咱们接着往下看~~~

创建`main.js`文件

在上文中不是创建了一个 electon 的文件夹吗，接下来我们在文件夹中创建一个 main.js 文件，在文件中创建一个主进程 （ps:代码中的配置官网都是有说明的，我这里就不介绍那么详细了），废话不多说直接上代码：

const { app, BrowserWindow } = require("electron");
// 导入 Node.js 的 path 模块
const path = require("node:path");
const fs = require("fs");

let win;
// 配置electron的应用窗口
const createWindow = () => {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 如果你需要在渲染进程中使用Node.js
      // 连接与渲染层的交互
      preload: path.join(__dirname, "preload.js"),
    },
  });
  
  // 连接本机前端页面的端口号
  win.loadURL("http://localhost:3000")

  // 打开开发工具
  win.webContents.openDevTools();

};

// 这段程序将会在 Electron 结束初始化和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow();
});

// 关闭所有窗口时退出应用
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

注意这里的 win.loadURL("http://localhost:3000"); 是你运行 vue 时候的端口号