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

Electron-Forge + Vue3 项目初始化

news 2025/7/7 11:37:43

本人对Electron的浅薄理解如下图所示
在这里插入图片描述
由上图可以，如果你需要开发一个electron应用，你得具备基本的前端开发经验。对于electron相关的知识，建议先了解下基本的窗口操作，比如新建窗口、关闭窗口等简单的操作，这些内容在官方文档都能学到，至于其他的内容，可以在开发过程根据需求翻阅官方文档即可，没必要把时间花在啃文档上。

官方文档：https://www.electronjs.org/zh/

该篇文章主要记录下使用新版Electron推荐的Electron-Forge初始化项目，并与Vue3结合开发

官方内容：https://www.electronforge.io/guides/framework-integration/vue-3

官方文档步骤：
在这里插入图片描述

初始化后的项目结构如下：

接下来创建vue项目目录结构：
安装vue-router路由

npm install vue-router

项目结构如下：
在这里插入图片描述

vue-project/pages/home/index.vue

<template>
  <h1>😁 首页</h1>
</template>

<script setup>
</script>

vue-project/router/index.js

import { createWebHashHistory, createRouter } from 'vue-router'

import HomeView from '@/vue-project/pages/home/index.vue'

const routes = [
  { path: '/', component: HomeView },
]
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router;

vue-project/App.vue

<template>
  <h1>🖥️ Hello World!</h1>
  <p>Welcome to your Electron application.</p>
  <p>
    <strong>Current route path:</strong> {{ $route.fullPath }}
  </p>
  <nav>
    <div>
      <RouterLink to="/">Go to Home</RouterLink>
    </div>
  </nav>
  <div style="margin-top: 20px; border: 1px solid grey; padding: 20px; border-radius: 10px;">
    <router-view></router-view>
  </div>
</template>

<script setup>
</script>

修改初始化时的项目文件，以便接入vue项目

src/renderer.js

import './index.css';
import { createApp } from 'vue';
import router from '@/vue-project/router';
import App from '@/vue-project/App.vue';

createApp(App).use(router).mount('#app');

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/renderer.js"></script>
  </body>
</html>

vite.renderer.config.mjs

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

// https://vitejs.dev/config
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    }
  }
});