electron+vite+vue3 快速入门教程

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

环境准备

Node.js: 首先确保你的机器上已经安装了 Node.js。你可以通过以下命令来检查是否已安装：
sh 复制代码
```
node -v
npm -v
```
创建项目目录 :

创建一个新的文件夹并初始化一个 Node.js 项目。
sh 复制代码
```
mkdir my-electron-vue-app
cd my-electron-vue-app
npm init -y
```

安装依赖

安装 Electron :

使用 npm 安装 Electron。注意，我们需要全局安装 Electron CLI 工具。
sh 复制代码
```
npm install electron --save-dev
npm install @electron-forge/cli --global
npx electron-forge import
```
创建 Vite 配置 :

使用 Vite 作为项目构建工具。首先安装 Vite 和 Vue 相关依赖。
sh 复制代码
```
npm install vite vue@next vue-router@next vuex@next --save-dev
```

配置 Vite :

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

js 复制代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

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

创建项目结构

创建基本目录结构:

sh 复制代码

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

编辑 index.html :

为 Vite 和 Vue 配置一个简单的 HTML 文件。

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 应用。

js 复制代码

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

创建 src/App.vue :

创建一个简单的 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 文件：

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 :

添加一些必要的配置和脚本。

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

运行项目

开发模式 :

使用 Vite 启动开发服务器。
sh 复制代码
```
npm run dev
```
打包和运行 Electron 应用 :

打包并启动应用。
sh 复制代码
```
npm run build
npm start
```

总结

以上步骤介绍了如何使用 Electron、Vite 和 Vue 3 创建一个简单的桌面应用程序。通过这些步骤，你可以搭建起一个基础的开发环境，并且可以在此基础上进一步扩展和定制你的应用。

希望这个快速入门教程对你有所帮助！如果你有任何问题或需要更多细节，请随时提问。