Electron + Node.js + TS + Vue3 + Vite 打造自动化游戏脚本工具（一，环境搭建）

前端

2023-10-17 00:46:06

前言

本系列文章旨在帮助大家使用 Electron + Node.js + TS + Vue3 + Vite 构建一个自动化游戏脚本工具，以提升游戏体验和效率。

在第一篇文章中，我们将介绍如何搭建项目的开发环境，包括安装必要的依赖项、配置项目结构和运行项目。

在接下来的文章中，我们将深入探讨如何编写和使用脚本，以及如何使用 Electron 将脚本打包成可执行文件。敬请期待！

环境搭建

1. 安装依赖项

首先，我们需要安装必要的依赖项。您可以使用以下命令进行安装：

npm install electron typescript vue3 vite --save

这将安装 Electron、TypeScript、Vue3 和 Vite 的最新版本。

2. 配置项目结构

接下来，我们需要创建一个项目文件夹并初始化一个新的 Vue3 项目。您可以使用以下命令完成此操作：

mkdir my-game-script-tool
cd my-game-script-tool
vue create .

这将在当前目录中创建一个名为 my-game-script-tool 的新文件夹，并初始化一个新的 Vue3 项目。

3. 修改项目结构

现在，我们需要修改项目的结构以使其适合我们的需求。首先，我们需要在 src 目录中创建一个新的文件夹 scripts，用于存储我们的脚本文件。接下来，我们需要在 src/main.js 文件中添加以下代码以加载我们的脚本：

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载脚本文件
  win.loadFile('src/scripts/index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})