electron+vite+vue3 快速入門實(shí)例教程

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

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

環(huán)境準(zhǔn)備

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

node -v
npm -v

創(chuàng)建項(xiàng)目目錄:
創(chuàng)建一個(gè)新的文件夾并初始化一個(gè) Node.js 項(xiàng)目。

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 作為項(xiàng)目構(gòu)建工具。首先安裝 Vite 和 Vue 相關(guān)依賴。

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

配置 Vite:
在項(xiàng)目根目錄下創(chuàng)建一個(gè) 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)建項(xiàng)目結(jié)構(gòu)

創(chuàng)建基本目錄結(jié)構(gòu):

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

編輯 index.html:
為 Vite 和 Vue 配置一個(gè)簡單的 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)建一個(gè)基本的 Vue 應(yīng)用。

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

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

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

配置 Electron

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

運(yùn)行項(xiàng)目

開發(fā)模式:
使用 Vite 啟動(dòng)開發(fā)服務(wù)器。

npm run dev

打包和運(yùn)行 Electron 應(yīng)用:
打包并啟動(dòng)應(yīng)用。

npm run buildnpm start

總結(jié)

以上步驟介紹了如何使用 Electron、Vite 和 Vue 3 創(chuàng)建一個(gè)簡單的桌面應(yīng)用程序。通過這些步驟，你可以搭建起一個(gè)基礎(chǔ)的開發(fā)環(huán)境，并且可以在此基礎(chǔ)上進(jìn)一步擴(kuò)展和定制你的應(yīng)用。

希望這個(gè)快速入門教程對你有所幫助！如果你有任何問題或需要更多細(xì)節(jié)，請隨時(shí)提問。

到此這篇關(guān)于electron+vite+vue3 快速入門實(shí)例教程的文章就介紹到這了,更多相關(guān)electron vite vue3 入門內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: