# electron-vite-vue3

**Repository Path**: ruanjingtao/electron-vite-vue3

## Basic Information

- **Project Name**: electron-vite-vue3
- **Description**: 使用vie+vue3的electorn项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-06
- **Last Updated**: 2025-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + TypeScript + Vite + electron
初始化项目参考
https://juejin.cn/post/7360899424107970586#heading-11

废话少说，先看效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/ccf81559a7f04574aadf689fa237ba4b.gif)
入门第一个electron的程序后 就发现使用原生还是太不方便了  html和js css逻辑分开 有更好的框架为何不用呢，查了下react和vue都可以和electron很好的融合，  首先第一步 用vite脚手架建一个vue项目，这里就不赘述了应该都会吧，我是用的webstorm更方便，一件新建项目选择脚手架就行了，没得或者用vscode的老老实实命令行npx create-vite 然后选择几个选项就行用ts就选上这个无所谓
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7cb28a8f7c0349ad9fb351f4d910a733.png)

创建好后 目录如图

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/d924b5807c304cf087178dec5b77a8cc.png)

然后npm i 再 npm run dev 你就可以看见vite脚手架的默认页面了

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/e32205915d6e4117896932155c935ee9.png)

这是没有代码审查和格式化工具，最近发现一个叫biome的很好用  结合了eslint和prettier，这样不用再同时引入两个还有一堆插件很麻烦，这个很轻量化的工具，推荐 再引入下几个electron的相关依赖

```
  "devDependencies": {
    "@biomejs/biome": "^2.1.3",
    "@vitejs/plugin-vue": "^6.0.0",
    "@vue/tsconfig": "^0.7.0",
    "electron": "^37.2.6",
    "electron-builder": "^26.0.12",
    "typescript": "~5.8.3",
    "vite": "^7.0.4",
    "vite-plugin-electron": "^0.29.0",
    "vue-tsc": "^2.2.12"
  }
```

创建一个biome.json再根目录来配置biome规则，默认就行，肥肠好用

```
{
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

```

根目录建立一个src-electron文件夹来存放electron的相关文件，业务不负责就放一个main.js就行了

```js
const { app, BrowserWindow } = require("electron");
const { join } = require("path");

// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";

function createWindow() {
  console.log("creatWindow", __dirname, process.env, process, process.platform);
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });
  // development模式
  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL);
    // 开启调试台
    win.webContents.openDevTools();
  } else {
    win.loadFile(join(__dirname, "../dist/index.html"));
  }
}

// Electron 会在初始化后并准备
app.whenReady().then(() => {
  createWindow();
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

```

再vite config中加入electron插件



```
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
import electron from "vite-plugin-electron";

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), electron({ entry: "./src-electron/main.js" })],
});

```

这时候你再来运行 就可以发现这个项目运行在了electron的窗口中 然后再webstorm中下载一个biome插件，再保存时候运行biome 这样保存时候可以自动的格式化代码和纠正一些错误

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/42f0ef9c54134312ae2d7f39690ceaa3.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/862609c840bf4468856d997934471e07.png)

大功告成，后面就是vue+vite怎么写  你就怎么写就完事

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/2912d6e548ce43209bfc7b976cdacc1d.png)

计算器代码，修改Helloworld，这块都不难  实在不行让AI写都行只要描述的够清楚就行，啥年代了还手敲啥

```vue
<script setup lang="ts">
import type { InputInstance } from "element-plus";
import { ElButton, ElInput } from "element-plus";
import { ref, watch } from "vue";

defineProps<{ msg: string }>();

const display = ref("0");
const currentOperator = ref<string | null>(null);
const firstOperand = ref<number | null>(null);
const waitingForOperand = ref(false);

// 定义按钮列表
const buttons = [
  { label: "AC", value: "AC", type: "primary", span: 1 },
  { label: "±", value: "+/-", type: "primary", span: 1 },
  { label: "%", value: "%", type: "primary", span: 1 },
  { label: "÷", value: "/", type: "primary", span: 1 },
  { label: "7", value: "7", type: "default", span: 1 },
  { label: "8", value: "8", type: "default", span: 1 },
  { label: "9", value: "9", type: "default", span: 1 },
  { label: "×", value: "*", type: "primary", span: 1 },
  { label: "4", value: "4", type: "default", span: 1 },
  { label: "5", value: "5", type: "default", span: 1 },
  { label: "6", value: "6", type: "default", span: 1 },
  { label: "-", value: "-", type: "primary", span: 1 },
  { label: "1", value: "1", type: "default", span: 1 },
  { label: "2", value: "2", type: "default", span: 1 },
  { label: "3", value: "3", type: "default", span: 1 },
  { label: "+", value: "+", type: "primary", span: 1 },
  { label: "0", value: "0", type: "default", span: 2 },
  { label: ".", value: ".", type: "default", span: 1 },
  { label: "=", value: "=", type: "primary", span: 1 },
];

// 输入框引用
const inputRef = ref<InputInstance>();

function inputDisplay(value: string) {
  // 移除所有非数字和小数点的字符（除了负号）
  const cleanValue = value.replace(/[^0-9.-]/g, "");

  if (cleanValue === "" || cleanValue === "-") {
    display.value = cleanValue || "0";
    return;
  }

  display.value = cleanValue;
}

function appendDigit(digit: string) {
  if (waitingForOperand.value) {
    display.value = digit;
    waitingForOperand.value = false;
  } else {
    if (display.value === "0" && digit !== ".") {
      display.value = digit;
    } else if (digit === "." && display.value.indexOf(".") !== -1) {
      // 防止重复输入小数点
      return;
    } else {
      display.value += digit;
    }
  }
}

function clearDisplay() {
  display.value = "0";
  currentOperator.value = null;
  firstOperand.value = null;
  waitingForOperand.value = false;
}

function toggleSign() {
  if (display.value !== "0") {
    if (display.value.charAt(0) === "-") {
      display.value = display.value.slice(1);
    } else {
      display.value = "-" + display.value;
    }
  }
}

function calculatePercentage() {
  const value = parseFloat(display.value);
  display.value = (value / 100).toString();
}

function setOperator(operator: string) {
  const inputValue = parseFloat(display.value);

  if (firstOperand.value === null) {
    firstOperand.value = inputValue;
  } else if (currentOperator.value) {
    const result = performCalculation();
    if (result !== null) {
      display.value = String(result);
      firstOperand.value = result;
    }
  }

  waitingForOperand.value = true;
  currentOperator.value = operator;
}

function performCalculation(): number | null {
  const inputValue = parseFloat(display.value);

  if (firstOperand.value === null || currentOperator.value === null) {
    return null;
  }

  let result = 0;
  switch (currentOperator.value) {
    case "+":
      result = firstOperand.value + inputValue;
      break;
    case "-":
      result = firstOperand.value - inputValue;
      break;
    case "*":
      result = firstOperand.value * inputValue;
      break;
    case "/":
      if (inputValue === 0) {
        display.value = "Error";
        return null;
      }
      result = firstOperand.value / inputValue;
      break;
    default:
      return null;
  }

  return result;
}

function calculate() {
  const result = performCalculation();

  if (result !== null) {
    display.value = String(result);
    firstOperand.value = result;
  }

  currentOperator.value = null;
  waitingForOperand.value = true;
}

function handleButtonClick(buttonValue: string) {
  switch (buttonValue) {
    case "AC":
      clearDisplay();
      break;
    case "+/-":
      toggleSign();
      break;
    case "%":
      calculatePercentage();
      break;
    case "+":
    case "-":
    case "*":
    case "/":
      setOperator(buttonValue);
      break;
    case "=":
      calculate();
      break;
    case ".":
      if (waitingForOperand.value) {
        display.value = "0.";
        waitingForOperand.value = false;
      } else if (display.value.indexOf(".") === -1) {
        display.value += ".";
      }
      break;
    default: // 数字按钮
      appendDigit(buttonValue);
      break;
  }
}

// 监听显示值变化，确保格式正确
watch(display, (newVal) => {
  if (
    newVal === "" ||
    (isNaN(parseFloat(newVal)) && newVal !== "-" && newVal !== "0")
  ) {
    display.value = "0";
  }
});
</script>

<template>
  <div class="calculator">
    <div class="display-container">
      <el-input
          ref="inputRef"
          v-model="display"
          class="display"
          @input="inputDisplay"
          @keydown.enter="calculate"
          readonly
      />
    </div>

    <div class="buttons-grid">
      <el-button
          v-for="(button, index) in buttons"
          :key="index"
          :type="button.type === 'primary' ? 'primary' : 'default'"
          :class="{
          'button-zero': button.value === '0',
          'operator-button': ['+', '-', '*', '/', '=', 'AC', '±', '%'].includes(button.value)
        }"
          @click="handleButtonClick(button.value)"
      >
        {{ button.label }}
      </el-button>
    </div>
  </div>
</template>

<style scoped>
.calculator {
  width: 320px;
  margin: 0 auto;
  text-align: center;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.display-container {
  margin-bottom: 15px;
}

.display {
  font-size: 2rem !important;
  text-align: right !important;
}

:deep(.el-input__wrapper) {
  padding: 20px !important;
  background-color: #f5f5f5 !important;
  box-shadow: 0 0 0 1px #dcdfe6 inset !important;
}

:deep(.el-input__inner) {
  text-align: right !important;
  font-size: 2rem !important;
  color: #666 !important;
  background-color: #f5f5f5 !important;
}

.buttons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

:deep(.el-button) {
  height: 70px !important;
  font-size: 1.5rem !important;
  border-radius: 8px !important;
  border: none !important;
  margin-left: 0px !important;
  width: 100%;
}

:deep(.el-button.button-zero) {
  grid-column: span 2;
}

:deep(.el-button.operator-button) {
  background-color: #ff9800 !important;
  color: white !important;
  border-color: #ff9800 !important;
}

:deep(.el-button.operator-button:hover) {
  background-color: #f57c00 !important;
  border-color: #f57c00 !important;
}

:deep(.el-button.operator-button:active) {
  background-color: #ef6c00 !important;
  border-color: #ef6c00 !important;
}

:deep(.el-button--danger) {
  background-color: #f44336 !important;
  border-color: #f44336 !important;
  color: white !important;
}

:deep(.el-button--danger:hover) {
  background-color: #d32f2f !important;
  border-color: #d32f2f !important;
}

:deep(.el-button--danger:active) {
  background-color: #c62828 !important;
  border-color: #c62828 !important;
}
</style>

```

开发完了就要打包

打包的话再package.json要配置一下

全部配置如下，build:{}中是electron-build的相关配置 其实也可以写配置文件  但这样简单些，主要就是配置了打包的方式，输出目录书否允许选择文件夹和语言啥的。

```
{
  "name": "electron-vite-vue3",
  "private": true,
  "version": "0.0.0",
  "main": "./src-electron/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "build-win": "vite build && electron-builder --win",
    "preview": "vite preview"
  },
  "build": {
    "compression": "maximum",
    "directories": {
      "output": "release/"
    },
    "win": {
      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "oneClick": false,
      "language": "2052",
      "perMachine": true,
      "allowToChangeInstallationDirectory": true
    }
  },
  "dependencies": {
    "element-plus": "^2.10.5",
    "vue": "^3.5.17"
  },
  "devDependencies": {
    "@biomejs/biome": "^2.1.3",
    "@vitejs/plugin-vue": "^6.0.0",
    "@vue/tsconfig": "^0.7.0",
    "electron": "^37.2.6",
    "electron-builder": "^26.0.12",
    "typescript": "~5.8.3",
    "vite": "^7.0.4",
    "vite-plugin-electron": "^0.29.0",
    "vue-tsc": "^2.2.12"
  }
}

```

最后你也可以打出来一个安装包啦  给朋友用也非常的好使

![img](https://i-blog.csdnimg.cn/direct/95917675a443457dbb17183d3a4a93c2.png)![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)编辑