electron+vite+vue3 快速入门教程

最新推荐文章于 2025-04-30 15:30:46 发布

2501_91537388

最新推荐文章于 2025-04-30 15:30:46 发布

阅读量925

点赞数 20

分类专栏：前端文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/2501_91537388/article/details/147633772

版权

前端专栏收录该内容

40 篇文章

订阅专栏

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"
  }
}