Electron+vite+vue3 从0到1搭建项目,开发Win、Mac客户端

随着前端技术的发展,出现了所谓的大前端。

大前端则是指基于前端技术延伸出来的各种终端平台及应用场景,包括APP、桌面端、手表终端、服务端等。

本篇文章主要是和大家一起学习一下使用Electron 如何打包出 WindowsMac 所使用的客户端APP;

下载安装

javascript 复制代码
// 前提条件 electron-vite 需要 Node.js 版本 18+,20+ 和 Vite 版本 4.0+
yarn create @quick-start/electron

cd electron-vite-demo // 项目名
yarn install 
yarn dev

// 下载时选择项,只做参考可以更加自己需求来选

如果遇到yarn install 下载时提示node版本问题,请参考使用nvm 切换不同node版本

初次运行

执行 yarn dev , 我们可以看到项目正常运行了起来,开心😄

目录结构

先把目录放出来,大家初步了解一下结构

javascript 复制代码
├── build // 构建过程中生成的临时文件
├── dist // 构建后文件,包含可发布的安装包等等
│   ├── builder-debug.yml
│   ├── builder-effective-config.yaml
│   ├── demo-1.0.0-mac.zip
│   ├── demo-app-1.0.0.dmg
│   ├── demo-app-1.0.0.exe
│   ├── latest-mac.yml
│   ├── latest.yml
│   ├── mac
│   └── win-unpacked
├── out
├── resources // 资源目录
│   ├── icon.ico
│   └── icon.png
├── src
│   ├── main // 主进程
│   │   ├── down.js
│   │   ├── index.js
│   │   ├── menu.js
│   │   ├── path.js
│   │   └── version.js
│   ├── preload // 预加载脚本
│   │   ├── down.js
│   │   ├── index.js
│   │   ├── locale.js
│   │   └── path.js
│   └── renderer  // 渲染器--前端代码
│       ├── index.html
│       └── src
├── .env.dev // 环境变量配置文件  .env.dev/.gray/.mock/.prod
├── .env.gray
├── .env.mock
├── .env.mock
├── .env.prod 
├── dev-app-update.yml
├── electron-builder.yml // 应用打包规则
├── electron.vite.config.mjs // 渲染进程(前端)的开发构建
├── package.json 
├── README.md // 项目说明文档
└── yarn.lock
相关推荐
墨痕砚白40 分钟前
VMware Workstation Pro虚拟机的下载和安装图文保姆级教程(附下载链接)
服务器·windows·vmware·虚拟机
双叶8363 小时前
(Python)文件储存的认识,文件路径(文件储存基础教程)(Windows系统文件路径)(基础教程)
开发语言·windows·python
棒棒AIT4 小时前
mac 苹果电脑 Intel 芯片(Mac X86) 安卓虚拟机 Android模拟器 的救命稻草(下载安装指南)
android·游戏·macos·安卓·mac
祁思妙想4 小时前
add新增管理员功能、BaseController类的简介--------示例OJ
数据库·windows
Felven8 小时前
飞腾D3000麒麟信安系统下配置intel I210 MAC
mac·d3000·intel网卡·i210
codebetter10 小时前
Windows子系统WSL Ubuntu24.04 Docker pull镜像失败
windows·docker
kyle~11 小时前
Windows---动态链接库Dynamic Link Library(.dll)
运维·windows·操作系统·运维开发·开发部署
中游鱼13 小时前
如何序列化和反序列化动态 XmlElement ?
windows·microsoft·c#
我命由我1234518 小时前
Kotlin 数据容器 - List(List 概述、创建 List、List 核心特性、List 元素访问、List 遍历)
java·开发语言·jvm·windows·java-ee·kotlin·list
mCell20 小时前
从删库到跑路?这50个Linux命令能保你职业生涯
linux·windows·macos