本人对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'),}} });
运行
npm run start
