electron-vue3开发

### Electron Vue3 开发教程及项目结构 #### 1. 项目目录结构及功能介绍 在 `Electron-Vue3-Template` 中，项目的目录结构清晰地划分了前端逻辑与后台逻辑的功能模块。以下是主要的目录及其作用： - **public/**: 存放静态资源文件，这些文件不会被 Webpack 处理[^1]。 - **src/main/**: 包含主进程代码，负责处理原生桌面应用的操作，例如窗口管理、菜单栏设置等[^2]。 - **src/renderer/**: 包含渲染进程代码，主要用于 Vue 组件及相关页面逻辑。 - **src/background.js**: 主要定义了 Electron 的背景页行为，通常用于监听事件或与其他系统组件交互。 - **babel.config.js**: 配置 Babel 编译器以支持 ES6+ 语法转换[^4]。 - **eslintrc.js**: ESLint 配置文件，确保代码风格一致性。 #### 2. 创建和初始化项目 通过以下命令可以快速搭建基于 Vue3 和 Electron 的开发环境： ```bash npm install -g @vue/cli vue create my-electron-app cd my-electron-app vue add electron-builder ``` 上述流程会自动安装必要的依赖项，并完成基础配置。 #### 3. 启动开发服务器 启动本地开发服务可以通过如下方式实现： ```bash npm run electron:serve # 或者使用 Yarn yarn run electron:serve ``` 此操作会在本地打开一个带有默认界面的应用程序实例，便于开发者实时调试[^3]。 #### 4. 应用程序打包 当开发完成后，可利用 `electron-builder` 对应用程序进行打包以便分发给最终用户： ```bash yarn run electron:build ``` 该命令会依据目标平台生成对应的安装包或可执行文件。 #### 5. 示例代码片段 以下是一个简单的 `background.js` 文件示例，展示了如何创建基本的浏览器窗口： ```javascript const { app, BrowserWindow } = require('electron'); let mainWindow; function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); mainWindow.loadURL(`file://${__dirname}/index.html`); } app.whenReady().then(() => { createWindow(); }); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); ``` 这段代码实现了核心功能，即加载 HTML 页面到新窗口中显示。 ---