推荐一款开箱即用的 Vue.js + Electron 跨平台应用开发模板

zero kwok

已于 2025-05-28 23:49:20 修改

阅读量292

点赞数 5

文章标签： vue.js electron 前端

于 2025-05-28 23:41:59 首次发布

本文链接：https://blog.youkuaiyun.com/cstringw/article/details/148293921

版权

今天给大家推荐一个的 Vue 3 + Electron 的桌面应用程序模板，可以用于生产环境。它使你可以专注于业务逻辑，而不用花心思在基础架构上, 快速构建现代化的跨平台桌面应用。

如果你打算快速推出产品、搭建项目原型，或者你是 Electron、Vue 的新手，那么这个模板大概率适合你。

模板简介

这个模板是一个开箱即用的解决方案，集成了 Vue 3 + Electron 生态，提供了完整的项目结构和预配置的开发环境。

项目地址：

主要特性

现代化技术栈
- 基于 Vue 3 + Electron 最新生态。
无边框窗口与圆角透明背景支持
- 模板支持无边框圆角透明窗口，解决了 Windows 平台下诸多令人头疼的兼容问题。
自定义原生风格的 MessageBox/Dialog
- 某些情况下, 我们需要一个独立于浏览器的 MessageBox 或者 Dialog, 利用模板可以轻易完成。
多语言(i18n)与主题支持
- 内置了亮/暗主题支持，并且可以轻松扩展自定义主题。
- 采用动态加载语言文件的方式，非开发者也能轻松添加翻译内容。
自动更新、一键打包推送功能

演示

语言文字与主题切换

语言文字与主题切换演示GI

原生对话框与窗口圆角切换

原生对话框与圆角切换演示GIF

自动更新

自动更新演示GIF

快速上手

# 克隆项目
git clone https://github.com/ZeroKwok/ElectronVueTemplate.git
cd ElectronVueTemplate

# 可选设置Node或Electron镜像
npm config set registry https://registry.npmmirror.com
yarn config set electron_mirror https://npmmirror.com/mirrors/electron/

# 安装依赖
yarn

# 运行
yarn start

# 打包
yarn package

# 构建安装程序
yarn make

Note 版本 20 及以上，建议使用 nvm 来管理 Node.js 版本。

项目结构

模板项目结构如下，将主进程、渲染进程和共享代码明确分离：

/
├── src/
│   ├── main/                # Electron主进程代码
│   ├── renderer/            # Vue渲染进程代码
│   ├── server/              # 服务器模式代码
│   └── shared/              # 共享代码
├── .env*                    # 环境变量配置
├── package.json             # 项目依赖和脚本
└── forge.config.js          # Electron Forge配置