Electron-Forge + Vue3 项目初始化

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

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

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

官方内容：https://www.electronforge.io/guides/framework-integration/vue-3
完整项目示例：https://github.com/ylpxzx/electron-forge-project/tree/init_project

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

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

接下来创建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'),}}
});