当前位置：首页 > news >正文

electron+vite+vue3 快速入门教程

news 2025/7/4 14:54:01

Electron、Vite 和 Vue 3 结合使用可以创建强大的跨平台桌面应用程序，下面是一个快速入门教程，帮助你搭建一个基于 Electron + Vite + Vue 3 的项目。

环境准备

Node.js: 首先确保你的机器上已经安装了 Node.js。你可以通过以下命令来检查是否已安装：
```
node -v
npm -v
```
创建项目目录:
创建一个新的文件夹并初始化一个 Node.js 项目。
```
mkdir my-electron-vue-app
cd my-electron-vue-app
npm init -y
```

安装依赖

安装 Electron:
使用 npm 安装 Electron。注意，我们需要全局安装 Electron CLI 工具。

npm install electron --save-dev
npm install @electron-forge/cli --global
npx electron-forge import

创建 Vite 配置:
使用 Vite 作为项目构建工具。首先安装 Vite 和 Vue 相关依赖。
```
npm install vite vue@next vue-router@next vuex@next --save-dev
```

配置 Vite:
在项目根目录下创建一个 vite.config.js 文件，用于配置 Vite：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],build: {rollupOptions: {input: 'index.html'}},resolve: {alias: {'@': '/src'}}
});

创建项目结构

创建基本目录结构:

mkdir -p src
touch index.html main.js package.json vite.config.js

编辑 index.html:
为 Vite 和 Vue 配置一个简单的 HTML 文件。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Electron + Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

编辑 main.js:
创建一个基本的 Vue 应用。

import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);
app.mount('#app');

创建 src/App.vue:
创建一个简单的 Vue 组件。

<template><div id="app"><h1>Hello, Electron + Vite + Vue!</h1></div>
</template><script>
export default {name: 'App'
}
</script>

配置 Electron

编辑 main.js:
创建一个基本的 Electron 应用。在项目根目录下创建一个 electron-main.js 文件：

const { app, BrowserWindow } = require('electron');
const path = require('path');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}});win.loadFile('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();}
});

编辑 package.json:
添加一些必要的配置和脚本。

{"name": "my-electron-vue-app","version": "1.0.0","main": "electron-main.js","scripts": {"dev": "vite","build": "vite build","start": "electron ."},"dependencies": {"vue": "^3.0.0"},"devDependencies": {"electron": "^14.0.0","@vitejs/plugin-vue": "^2.0.0","vite": "^2.6.4"}
}