[JavaScript知识库]【electron】如何快速进行electron项目开发（包含了各种创建一个electron项目的方法）

导读

之前一直用的element-elment-admin对应的electron工程。随着vue3和TypeScript越来越流行，就想着转到vue3上。于是找了各种方案去尝试，尝试结果太过曲折，记录一下，踩大家未踩的坑。

开发环境

各种electron项目初始化方案

create-electron（推荐）

功能特征

• 开源
• 支持多种模板：
  • 支持js和ts
  • 支持sample、vue、react、svelte
• 使用 ESLint + Prettier 更好的代码风格和质量检查，帮助你编写高质量的代码
• 使用 electron-vite，一个与 Vite 集成非常快的构建工具，你无需关心配置。
• 使用 electron-toolkit 工具包帮助你更好的开发，例如：TSconfigs 扩展；在预加载脚本中向渲染进程公开常见的 Electron API；为主进程提供有效的实用API。
• 使用 electron-builder 并预设打包配置，让你轻松打包 Electron 应用。
• 使用 electron-updater 进行自动更新，基于 electron-builder。

安装

使用 npm:
$ npm create @quick-start/electron

使用 Yarn:
$ yarn create @quick-start/electron

使用 pnpm:
$ pnpm create @quick-start/electron

直接命令行指定模板

# npm 6.x
npm create @quick-start/electron my-app --template vue

# npm 7+, extra double-dash is needed:
npm create @quick-start/electron my-app -- --template vue

兼容性注意: create-electron 需要 Node.js 版本 >= 14.0.0。当你的包管理器发出警告时，请注意升级你的 Node 版本。

vue-cli + electron-vue

原理是克隆git，然后把template目录定制一下。推荐的原因：

• github 15.1k的收藏
• 大量基于该项目开源的项目可以参考
• 详尽的教程：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

使用说明

# 安装vue-cli
npm install -g vue-cli

# 初始化项目（访问的是github，有时候需要科学上网）
vue init simulatedgreg/electron-vue my-project

# 安装、运行
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

fork的优质代码

github中罗列出来的fork项目 https://github.com/SimulatedGREG/electron-vue

• Lulumi-browser: Lulumi-browser is a light weight browser coded with Vue.js 2 and Electron
  Space-Snake: A Desktop game built with Electron and Vue.js.
• Forrest: An npm scripts desktop client
• miikun: A Simple Markdown Editor
• Dockeron: A dockeron project, built on Electron + Vue.js for Docker
• YT.Downloader: Youtube Video Downloader&Converter and Play Music, built with Electron & Vue.js.
• Backlog: Simple app for storing TODOs, ideas or backlog items. You can organize them with boards. Sleek flow. Built with Electron + Vue.js + iView

克隆git

下面列举了一些不错的electron框架项目，直接下载使用，事半功倍

• https://gitee.com/Zh-Sky/electron-vite-template
  • 只能node18以后的版本，有点坑
• https://github.com/PanJiaChen/electron-vue-admin
  • 著名项目vue-admin-template的electron版本，就是有点老了
• https://gitee.com/zkyt/electron-vue-element-admin
  • 基于vue-element-admin改的electron版本

官网手把手教你创建一个项目

没有脚手架，参考下面链接：
https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app

vue add electron-builder

一个基于vue-cli的项目：https://github.com/nklayman/vue-cli-plugin-electron-builder
找到这个方案的时候以为找到了解药，用了之后，发现是毒药：

• 它是把现有的web项目直接通过http服务器运行起来，然后访问URL。
• 也就是说，本地访问等node相关的功能都不能使用，所以做客户端应用开发的，可以放弃这个方案了。

参考资料

• create-electron | 1分钟快速搭建一个完善的Electron项目 https://zhuanlan.zhihu.com/p/495445832
• create-electron | quick-start源码地址 https://github.com/alex8088/quick-start/
• electron-toolkithttps://github.com/alex8088/electron-toolkit

Vue脚手架（vue-cli）搭建和目录结构详解

• qq群：夜猫逐梦技术交流裙/953949723