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

夜猫逐梦

已于 2023-09-21 18:02:11 修改

阅读量2.7k

点赞数

分类专栏： # electron 文章标签： electron vue.js javascript

于 2022-10-29 16:48:24 首次发布

本文链接：https://blog.csdn.net/kinghzking/article/details/127587018

版权

electron 专栏收录该内容

10 篇文章

订阅专栏

文章目录

导读

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

开发环境

	版本号	描述
文章日期	2022-10-29
操作系统	Win10-1607
node -v	v14.20.0	npm -v （6.14.17）
electron	@16.0.7	npm list

各种electron项目初始化方案

克隆git（推荐）

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

https://github.com/ziyoren/electron-vite-vue2
- vue2的！！！
- vite的！！！
- 轻量的，可自定义的！！！
https://gitee.com/Zh-Sky/electron-vue-template
- 只能node16以后的版本，vue2的！！！
https://gitee.com/Zh-Sky/electron-vite-template
- 只能node18以后的版本，vue3的！！！
https://github.com/PanJiaChen/electron-vue-admin
- 著名项目vue-admin-template的electron版本，就是有点老了
https://gitee.com/zkyt/electron-vue-element-admin
- 基于vue-element-admin改的electron版本

create-electron（推荐）

github官网：https://github.com/alex8088/quick-start/blob/master/packages/create-electron/README.md
问题：目前发现，只支持vue3，不知道怎么设置vue2的！！！

功能特征

开源
支持多种模板：
- 支持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

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

没有脚手架，参考下面链接：
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相关的功能都不能使用，所以做客户端应用开发的，可以放弃这个方案了。