基于vue3+ts+electron搭建桌面端开发框架

最新推荐文章于 2025-06-27 15:03:38 发布
原创 最新推荐文章于 2025-06-27 15:03:38 发布 · 3.4k 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#electron #前端 #javascript

文章目录


之前一直使用qt做桌面版工具开发，但是界面美化一直是个麻烦的事情，想像前端那样有各种各样的框架可以使用，而electron插件在我的认知里是最好的选择，参考网上别人的教程，和ts一起配置时总会有各种坑，现在把我的搭建记录分享一下，希望大家能少踩坑

创建vue项目

这里默认大家都知道vue是干嘛的哈

vue create myvue
选择手动配置

请添加图片描述
这里如果是第一次创建项目的话，可以选择手动，然后创建完后可以保存下来，就如大家看到的第一个Rcoon一样，这个是我自己经常用的配置，所以就保存下来了
选择手动配置后，会有下面这些选项供你选择，按空格键就可以选择

请添加图片描述
说明

  1. Babel 转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
  2. TypeScript TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
  3. Progressive Web App (PWA) Support 渐进式Web应用程序
  4. Router vue-router（vue路由）
  5. Vuex vuex（vue的状态管理模式）
  6. CSS Pre-processors CSS 预处理器（如：less、sass）
  7. Linter / Formatter 代码风格检查和格式化（如：ESlint）
  8. Unit Testing 单元测试（unit tests）
  9. E2E Testing e2e（end to end） 测试

一般我们选择 1，2，4，5，6，7就可以了

配置vue版本

最低0.47元/天 解锁文章

200万优质内容无限畅学
Electron+Vue3整合-开发时整合-全部ts开发 + 一条命令启动vue3和electron两个服务
northcastle的博客
04-21 1295
vue3 + electron 整合，全部使用 typescript 开发，配置一条命令同时启动vue3 和 electron 两个服务
Vite+Vue3+TS+Electron构建桌面应用
weixin_30230009的博客
04-03 4476
前言之前开发项目遇到前端的需求，我通常会选择Vue2，无他，只是在众多前端框架中，我比较熟悉Vue2，此前尝试学过一段时间React，被它的Hook恶心到了，会了又学，学了又忘，所以还是回到Vue的怀抱，至于React，日后再挑战。本篇文章使用当前最新的前端技术体系来构建一个桌面应用，本篇只是记录项目搭建的过程并实现项目的打包与安装，先看效果图：image.png我们使用...
记个笔记：关于使用Vue3+Electron+TS创建项目总结
m0_60846226的博客
02-06 1034
最近学习`Vue3`+`Electron`结合创建单页面应用和多页面应用进行总结，记个笔记！！！
electron + vite + vue3的框架搭建
最新发布
weixin_64282111的博客
06-27 1130
之前已经了解过了Electron的基本语法，现在搭建一个electron + vite + vue3的初步框架。
vue3-electron-vite-ts:使用了vue3、electron、vite、ts
05-08
Vite电子生成器模板 Vite +电子= :fire: 这是用于电子应用的安全模板。 遵循最新的安全要求，建议和最佳实践编写。 引擎盖下使用了超级快，下一代捆绑用于编译的。 默认情况下，该接口使用Vue框架，但是您可以轻松使用任何其他框架，例如React ， Preact ， Angular ， Svelte或其他任何框架。 Vite与框架无关 支持 此模板由维护。 你可以 继续开发此模板。 如果您有想法，问题或建议-欢迎进行。 :smiling_face_with_smiling_eyes: 特征 电子 模板使用具有所有最新安全补丁程序的最新电子版本。 应用程序的体系结构是根据安全建设和最佳实践。 的最新版本用于编译应用程序。 恶毒 Vite用于捆绑所有源代码。 这是一款非常快速的打包机，具有许多强大的功能。 您可以在此视频中了解有关其安排的更多信息。 Vite支持读取.env文件。 我的模板有一个单独的命令来生成带有类型定义您的
vue3+ts+election
小dobby
06-28 357
vue3+ts+election
前端使用electron+vue3+ts搭建一个桌面端应用且可以热更新
weixin_50307964的博客
01-13 2926
将以下代码复制到vue.config.js的builderOptions对象中即可provider : "generic" , url : 'https:' , // 打包文件地址,与以上链接需相同 } , ] ,然后再次打包安装测试；没有问题就可以上线了也可以查看线上代码json-tool工具GitHub仓库json-tool工具软件以前的文章electron+vue3+ts开发了一个JSON工具桌面软件javascript求最大值最小值的另一种写法reduce。
vue3+vite+electron开发桌面端应用流程
qq_39460057的博客
04-09 2822
【代码】vue3+vite+electron开发桌面端应用流程。
electron+vite+vue3+sqlite3基础框架
12-14
本项目是一个基于`Electron`的桌面应用程序开发框架，它结合了现代前端开发工具`Vite`和流行的前端框架`Vue.js`的最新版本`Vue3`，以及轻量级的本地数据库系统`SQLite3`。这个基础框架为开发者提供了一个快速启动新...
基于 Electron+Vite+Vue3+Sass 框架搭建
前端技术
07-23 1216
基于 Electron+Vite+Vue3+Sass 框架搭建
Electron Forge + Vite + Vue3 + Ts 搭建 Electron 项目到应用打包
腊肉的博客
05-08 3373
npm init electron-app@latest my-app -- --template=vite-typescript
vue-cli-plugin-electron-builder-适用于Electron的Vue CLI 3插件，无需使用Electron Builder的必需配置。-Vue.js开发
05-27
Vue CLI插件Electron Builder可以轻松构建带有Electron Build状态的台式机Vue.js应用程序：快速入门：在Vue CLI Plugin Electron Builder可以轻松地构建带有Electron Build状态的台式机Vue.js App桌面。 ：在使用Vue-CLI 3或4创建的应用程序目录中打开一个终端（建议使用4）。 然后，通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器：vue add electronic-builder就是这样！ 您准备好出发了！ 要启动开发服务器，请执行以下操作：如果您使用Yarn（强烈建议使用）：yarn electronic：serve或如果您使用NPM：npm run electronic：serve
Vue3 + Vite + Electron + Ts 项目快速创建
weixin_64684095的博客
01-07 2567
dist-electron/index.js 创建窗口。为什么不是 ts 呢，因为 electron 不支持 ts。集成 Vite 和 Electron，方便后续在渲染进程中使用 Node API 或 Electron API。dist-electron/preload.js 在渲染进程调用主进程 API。添加入口 js 和执行命令。
只要你会前端的vue框架就可以开发电脑桌面应用-vite+vue+Electron构建-用vue习惯开发应用
GoFly开发者的博客
11-08 2862
GoFLy本着大道至简思想用vite+vue3基于Electron集成一套桌面应用快速开发框架，让前端技术员用Vue就可以开发跨平台桌面应用。目前框架引入Arco DesignUI框架。
Vue在桌面应用开发中的应用
weixin_41978174的博客
07-22 2251
Vue.js 在桌面应用开发中的应用主要通过与 Electron 框架结合来实现。Electron 是一个用于构建跨平台桌面应用的框架，它允许开发者使用 web 技术（HTML、CSS、JavaScript）来构建桌面应用。通过将 Vue.js 和 Electron 结合使用，开发者可以利用 Vue 的灵活性和 Electron 的桌面应用能力，创建高效、功能丰富的跨平台桌面应用。：创建 Electron 的主进程文件（如。
vue3.0+ts+electron实现桌面端的开发
Cute_new_rookie的博客
10-28 710
首先用脚手架创建一个vue3.0的项目，项目需要使用ts且使用class-style的方式创建vue3.0+ts项目。 项目完成后，先熟悉ts语言，熟悉之后熟悉class-style项目。 熟悉项目之后，引入electron，安装之前建议先配置淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org vue创建好一个本地项目之后，可以到项目根目录执行 vue add electron-builder 耐心等待安装结束，如果中
使用Electron + Vue3 + TS搭建桌面端应用并可热更新
三拾的博客
04-25 1214
以上为详细的搭建步骤和必要的技术。
Electron - #001 搭建Windows开发环境（Vue3+TS）
AlanL的专栏
09-08 825
搭建Windows开发环境（Vue3+TS）
vue3+ts+vite+electron搭建桌面应用
Bennett_G博客
04-04 2024
提示：开发桌面应用，就不得不提Electron ，之前使用vue+electron ,官方提供了Vue CLI Plugin Electron Builder,但是也只能使用了vue-cli(而且使用vue-cli-electron-builder构建，发现最新版本也才13,Electron最新版本都23了😅😅😅),随着vite的崛起以及ts,我们也需要与时俱进不是吗😃😃😃ts: ^4.9.3。
electron + vue3 + ts桌面应用开发
03-25
<think>嗯，用户想了解如何使用Electron、Vue3和TypeScript开发桌面应用程序。首先，我需要回忆一下这些技术如何整合在一起。Electron是一个用Web技术构建桌面应用的框架，Vue3是前端框架，TypeScript则提供类型支持。用户可能需要一个从零开始的教程，包括环境搭建、项目配置、集成步骤以及常见问题的解决。 首先，我应该检查是否有现成的模板或工具可以帮助快速创建项目，比如electron-vite或者vue-cli-plugin-electron-builder。然后，步骤可能包括创建Vue3项目，添加Electron和TypeScript支持，处理进程间通信，以及打包应用。 还要注意TypeScript的配置，比如声明文件（.d.ts）来解决类型错误，这在引用[4]中提到过。另外，上下文隔离和预加载脚本也是Electron中的重要概念，需要详细说明。 用户可能还会关心如何优化开发流程，比如热重载和调试技巧。最后，示例代码和项目结构的展示会帮助用户更好地理解。需要确保所有代码片段格式正确，使用$...$和$$...$$的地方符合要求，但看起来这个问题主要涉及代码块，可能不需要太多数学公式。不过，还是要按照系统指令处理任何数学表达式。</think># 使用Electron+Vue3+TypeScript开发桌面应用教程 ## 一、环境准备 1. 安装Node.js（建议v16.x+） 2. 安装Vue CLI： ```bash npm install -g @vue/cli ``` 3. 推荐使用electron-vite脚手架： ```bash npx create-electron-vite@latest ``` ## 二、项目创建（Vue3+TS） ```bash vue create electron-vue3-demo ``` 选择TypeScript特性，推荐配置： ``` ◉ Babel ◉ TypeScript ◉ Vuex ◉ CSS Pre-processors ◉ Linter/Formatter ``` ## 三、集成Electron 1. 添加electron-builder： ```bash vue add electron-builder ``` 2. 安装必要依赖： ```bash npm install electron @types/electron -D ``` ## 四、项目结构 ``` ├── src │ ├── main // 主进程代码 │ │ └── index.ts // 主进程入口 │ ├── renderer // 渲染进程代码 │ │ └── src // Vue3项目代码 │ └── preload // 预加载脚本 ``` ## 五、类型声明配置（关键） 根据引用[4]建议，创建类型声明文件： ```typescript // src/types/global.d.ts export interface IElectronAPI { platform: string; openFile: () => Promise<string>; } declare global { interface Window { electronAPI: IElectronAPI; } } ``` ## 六、进程通信示例 主进程代码： ```typescript // src/main/index.ts import { app, BrowserWindow, ipcMain } from &#39;electron&#39; ipcMain.handle(&#39;get-platform&#39;, () => process.platform) ``` 预加载脚本： ```typescript // src/preload/index.ts contextBridge.exposeInMainWorld(&#39;electronAPI&#39;, { platform: () => ipcRenderer.invoke(&#39;get-platform&#39;) }) ``` Vue组件调用： ```typescript // src/renderer/src/components/Demo.vue import { onMounted } from &#39;vue&#39; onMounted(() => { console.log(window.electronAPI.platform()) }) ``` ## 七、调试与打包 1. 开发模式： ```bash npm run electron:serve ``` 2. 生产打包： ```bash npm run electron:build ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值