文章目录
导读
之前一直用的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
的!!!
- 只能node16以后的版本,
- https://gitee.com/Zh-Sky/electron-vite-template
- 只能node18以后的版本,
vue3
的!!!
- 只能node18以后的版本,
- 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 Desktopgame
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相关的功能都不能使用,所以做客户端应用开发的,可以放弃这个方案了。
参考资料
- 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
- qq群:夜猫逐梦技术交流裙/953949723