Electron+Vite+Vue 3桌面应用模版

Electron、Vite、Vue3 的组合,真的是前端搞桌面应用的黄金搭配。

Electron的跨平台能力,加上前端熟悉的技术栈,让你用写网页的方式做桌面软件。像访问文件系统、弹通知这些,Electron 都能搞定,还能跑在 Windows、macOS、Linux,挺方便的。

Vite的话,开发体验是真的香。热更新几乎秒级响应,改代码不用等。用它做主构建工具,不但启动快,资源编译也比 Webpack 轻巧得多。

Vue3就不用说了,Composition API 灵活又好组织代码,配合script setup语法,逻辑写起来清爽。像SuspenseTeleport这些高级特性,也能帮你异步和布局问题。

整个模版搭起来也不麻烦。npm install拉下依赖,npm run dev启动开发,Vue 页面写完直接npm run electron:serve预览桌面应用,想打包就npm run electron:build,流程顺。

如果你写惯了前端项目,又想折腾下桌面端,不妨试试这个模版,省了不少配置时间。想看更多思路,可以看看Vue 3 Electron 模板或者electron-vue-vite 整合方案这些文章,会有不少启发。

开发的时候注意下 Node 和 Electron 版本兼容问题,还有不要滥用 Node API,毕竟桌面安全也重要。,边写边跑,调试舒服,体验也不错~

zip
electron-vite-temp.zip 预估大小:32个文件
folder
electron-vite-temp 文件夹
file
yarn.lock 90KB
folder
.vscode 文件夹
file
extensions.json 75B
file
tsconfig.node.json 213B
folder
src 文件夹
file
style.css 1KB
file
main.ts 175B
file
App.vue 657B
folder
assets 文件夹
file
vue.svg 496B
folder
components 文件夹
file
HelloWorld.vue 787B
file
vite-env.d.ts 38B
folder
dist 文件夹
folder
assets 文件夹
file
vue-5532db34.svg 496B
file
index-738647c0.js 51KB
file
index-a802daab.css 1KB
file
electron-vite.animate.svg 7KB
file
vite.svg 1KB
file
index.html 457B
file
electron-vite.svg 7KB
file
package.json 613B
folder
public 文件夹
file
electron-vite.animate.svg 7KB
file
vite.svg 1KB
file
electron-vite.svg 7KB
folder
dist-electron 文件夹
file
preload.js 2KB
file
main.js 648B
file
pnpm-lock.yaml 71KB
file
vite.config.ts 695B
file
index.html 362B
file
electron-builder.json5 789B
file
.gitignore 275B
file
tsconfig.json 673B
folder
electron 文件夹
file
preload.ts 2KB
file
main.ts 1KB
file
electron-env.d.ts 465B
file
README.md 1KB
zip 文件大小:116.9KB