Electron+Vue3.2+TypeScript+Vite开发桌面端

本文介绍了如何利用Electron、Vue3.2、TypeScript和Vite开发桌面应用程序。首先,文章详细描述了项目的目录结构设计,接着讲述了初始化项目、配置.yarnrc、安装Electron以及设置相应的项目配置。通过vite-plugin-electron插件,实现了Vue和Electron的结合。然后,文章展示了如何创建主进程和预加载文件,以及配置tsconfig.json和vite.config.ts。最后,讨论了在Vue中如何进行上下文隔离的接口调用,以显示系统平台信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 Electron可以让程序员重用Web的代码,使用HTML、CSS、JavaScript来构建桌面应用,并在不同平台上使用。 
   Electron官网上说: **“比你想象的更简单”** ————“如果你可以建一个网站,你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。”

   Vue 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。目前 Vue 已经成为继 Rect 之后最流行的前端开发框架。

   我找到了一个插件:**vite-plugin-electron**,可以很方便的帮我们把 electron 和 vue 结合起来,开发起来非常方便。

目录结构设计

因为我们需要使用 Electron 和 vue 进行开发,因此我们把它们分开目录存储,基础目录结构如下:

  • electron-main:主进程目录
  • electron-preload:预加载代码目录,主要是定义桥接通信
  • 其他文件:也就是 vue 初始化后的目录

目录结构这么设计的原因是因为我们使用的 vite-plugin-electron 插件需要使用这样的目录结构,目前还没有提供设置修改。

初始化项目目录

下面就开始初始项目

yarn create vite electron-desktop --template vue-ts 

先使用 vite 创建 vue 项目,然后我们再将 electron 嵌入到里面

初始化完成后,我们先做一个本地 yarn 源的配置,防止下载库的时候出现异常。

配置.yarnrc

registry "https://registry.npm.taobao.org/"

electron_mirror "https://npm.taobao.org/mirrors/electron/"
electron_builder_binaries_mirror "http://npm.taobao.org/mirrors/electron-builder-binaries/" 

配置完下载源后,就可以安装 electron 了

安装Electron

yarn add -D electron electron-builder rimraf vite-plugin-electron electron-devtools-installer 
  • electron-builder:打包工具
  • rimraf:快速删除文件或目录工具
  • vite-plugin-electron:vite 结合 electron 的库,关于这个插件可以参见 Vite 与 Electron 无缝衔接
  • electron-devtools-installer:electron 开发工具

vite-plugin-electron 插件是将 vite 和 electron 结合在一起的,可以让我们非常方便的结合 electron 和 vue,需要做一些指定的配置。

<think>嗯,用户想了解如何使用ElectronVue3TypeScript开发桌面应用程序。首先,我需要回忆一下这些技术如何整合在一起。Electron是一个用Web技术构建桌面应用的框架,Vue3是前框架,TypeScript则提供类型支持。用户可能需要一个从零开始的教程,包括环境搭建、项目配置、集成步骤以及常见问题的解决。 首先,我应该检查是否有现成的模板或工具可以帮助快速创建项目,比如electron-vite或者vue-cli-plugin-electron-builder。然后,步骤可能包括创建Vue3项目,添加ElectronTypeScript支持,处理进程间通信,以及打包应用。 还要注意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 ◉ TypeScriptVuex ◉ 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 ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值