Electron+Vite+Vue3跨平台电脑桌面应用快速开发框架(开箱即用)与Go快速开发后台框架api结合开发也可以单独使用

跨平台电脑桌面应用快速开发框架介绍

一个可以用Vite+vue3基于electron开发的电脑桌面应用的框架(我们不生产框架,我们是优秀框架的搬运工)。前端开发者用一套熟悉的vue框架就可以开发电脑应用,无需在学习其他语言,只要你会vue前端开发就可以开发桌面应用。

框架GoFly官方介绍网址链接:goflys.cn/ardetail?id...

git代码仓链接:gitee.com/huang_li_sh...

快速开始

gitee 下载框架代码到本地

bash 复制代码
 git clone https://gitee.com/huang_li_shi_admin/vite_electron.git

初始项目

如果初始下载失败,请更改资源镜像(淘宝镜像)

复制代码
yarn install

运行项目

复制代码
yarn dev

可以看到创建了一个dist-electron文件夹,同时打开了一个桌面应用

打包项目

复制代码
yarn build

成功后会生成一个release文件夹,在里面就能看到打包好的exe安装包了。

安装Electron(选择安装-一般yarn install 就可以跑)

1.先配置下镜像

不安装下载和打包时可能会超时出错

arduino 复制代码
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/

yarn config set electron_builder_binaries_mirror https://npm.taobao.org/mirrors/electron-builder-binaries/

2.接下来开始安装electron

csharp 复制代码
yarn add electron -D

3.接着安装vite-plugin-electron插件

该插件用于配置electron打包编译的文件入口

csharp 复制代码
yarn add vite-plugin-electron -D

开发注意事项

  1. ctrl+shift+i 切换开发者控制台

  2. electron框架API代码electron\renderers下添加

  3. vue页面调用Electron框架的API方法在src\utils\ipcMainApi.js统一管理

开发文档

开发参考我们封装框架的GoFly桌面快速开发框架文档,需要框electron请electron官方文档,我们框架集成了vue的UI框架方便您快速开发应用,无需自己搭建基础依赖和技术选择。

GoFly桌面应用框架预览图

相关推荐
leoZ2311 小时前
Claude 驱动的全栈开发:Spring Boot + Vue 的 BS 架构实践
vue.js·spring boot·架构
荒诞英雄5 小时前
从 17MB Vendor 大包到按需加载:Vite 多入口 Vue 组件库首屏优化实践
vue.js·vite
jsonbro5 小时前
手把手带你实现发布订阅模式
前端·vue.js·设计模式
熊猫钓鱼>_>5 小时前
Electron:当 Web 技术统治桌面
大数据·前端·javascript·人工智能·架构·electron·agent
程序员老刘6 小时前
Opencode从Tauri切回Electron,桌面端技术选型别被体积陷阱带偏了
electron·ai编程
Cobyte7 小时前
23.Vue Vapor 组件 attrs 的实现
前端·javascript·vue.js
斯特凡今天也很帅8 小时前
xml页面可以打开,不报错,但是显示数据的地方也不显示,我是怎么解决的
xml·vue.js
柯克七七9 小时前
给老项目加了 TypeScript,本来只想自己爽,结果全公司代码审查标准被我抬高了
前端·vue.js·typescript
大意的百合11 小时前
Electron 应用如何上架微软商店:从 MSIX 打包到商店提交
javascript·microsoft·electron
自然 醒11 小时前
前端如何实现在线预览office常见文件功能?
前端·vue.js