electron-vue: 采用Vue3和Electron的软件开发模版

electron-vue 是一个软件开发工程模版，专为基于 Electron 框架的桌面应用程序开发而设计。该模版采用了一种双 package.json 结构，这种结构有助于更好地管理和维护项目依赖。Electron 是一个使用 JavaScript、HTML 和 CSS 等网页技术来构建跨平台的桌面应用程序框架，它允许开发者利用前端技术开发具有本地应用程序性能的桌面应用。 知识点详细说明: 1. 双 package.json 结构: 在 electron-vue 模版中，采用了双 package.json 结构，意味着项目中存在两个 package.json 文件，一个用于管理 Node.js 相关的依赖和脚本（通常是主进程），另一个用于管理前端资源（如 Vue 组件）和对应的打包任务（通常是渲染进程）。这种结构使得项目结构更为清晰，并且能够针对不同的运行环境优化依赖和配置。 2. webpack5 + electron-builder: electron-vue 模版使用 webpack5 作为模块打包器，webpack5 是一个广泛使用的前端构建工具，它能够处理资源模块的合并、转译、压缩等工作。同时，项目还集成了 electron-builder，这是一个用于打包和分发 Electron 应用程序的工具，支持应用打包成不同平台的安装程序。 3. main 和 renderer 进程开发: Electron 应用程序被分为 main 进程和 renderer 进程，main 进程负责管理窗口、菜单和应用的生命周期等，而 renderer 进程则负责渲染页面。在 electron-vue 模版中，这两个进程都使用 ES6 语法，并且可以选择使用 Vue.js 或 React 框架来构建用户界面。这种设计允许开发者根据项目需求和个人偏好灵活选择前端技术栈。 4. 热模块替换 (HMR) 支持: electron-vue 模版支持在开发模式下通过热模块替换技术来更新 main 进程和 renderer 进程中的文件，这意味着在开发过程中可以实时刷新应用，而不需要重新启动整个应用，从而提高了开发效率。 5. TypeScript 开发支持: TypeScript 是 JavaScript 的超集，它添加了类型系统和其它特性。electron-vue 模版支持使用 TypeScript 进行开发，这意味着可以享受到静态类型检查带来的好处，如提前发现错误、提高代码质量等。 6. @babel/preset-env 自动转换: @babel/preset-env 是 Babel 一个预设，它可以将 ES6+ 代码自动转换成向后兼容的 JavaScript 代码，以确保在旧版浏览器或环境中代码的兼容性。electron-vue 模版中利用 @babel/preset-env 对 main 进程和 renderer 进程的代码进行转换，以确保应用的兼容性。 7. 快速开始步骤: 使用 electron-vue 模版的快速开始指南包括几个步骤： - 通过 git clone 命令或下载模版文件获取 electron-vue 模版代码； - 进入模版目录并执行 `npm install` 命令来安装依赖； - 使用 `npm run tsc` 命令执行 TypeScript 的类型检测； - 执行 `npm run dev` 启动开发环境，并通过添加 `--hot` 参数启用热模块替换。 通过以上步骤，开发者可以快速搭建起开发环境，开始 electron-vue 应用程序的开发工作。 总结：electron-vue 模版简化了 Electron 应用程序的开发流程，它通过提供一个结构化和功能丰富的模版，使得开发者能够更容易地构建出具有高性能的跨平台桌面应用。模版中的技术选型和配置均旨在提高开发效率和应用的稳定性。