electron+vite+vue3 快速入門實例教程

更新時間：2025年05月07日 11:57:10 作者：2501_91537388

Electron、Vite 和 Vue 3 結合使用可以創(chuàng)建強大的跨平臺桌面應用程序,下面是一個快速入門教程,幫助你搭建一個基于 Electron + Vite + Vue 3 的項目,感興趣的朋友一起看看吧

環(huán)境準備

Node.js: 首先確保你的機器上已經(jīng)安裝了 Node.js。你可以通過以下命令來檢查是否已安裝：

node -v
npm -v

創(chuàng)建項目目錄:
創(chuàng)建一個新的文件夾并初始化一個 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

創(chuàng)建 Vite 配置:
使用 Vite 作為項目構建工具。首先安裝 Vite 和 Vue 相關依賴。

npm install vite vue@next vue-router@next vuex@next --save-dev

配置 Vite:
在項目根目錄下創(chuàng)建一個 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'
    }
  }
});

創(chuàng)建項目結構

創(chuàng)建基本目錄結構:

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:
創(chuàng)建一個基本的 Vue 應用。

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

創(chuàng)建 src/App.vue:
創(chuàng)建一個簡單的 Vue 組件。

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

配置 Electron

編輯 main.js:
創(chuàng)建一個基本的 Electron 應用。在項目根目錄下創(chuàng)建一個 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"
  }
}