【源码】基于 Vite 和 Electron 框架的桌面应用开发方案

项目简介

本项目是基于 Vite 构建，运用 Vue 3 的 TSX 语法编写界面，并借助 Electron 构建桌面程序的解决方案，为开发者提供使用现代前端技术栈开发桌面应用的途径。

项目的主要特性和功能

主要特性

• 借助 Vite 实现快速冷启动与热更新，提升开发效率。
• 采用 Vue 3 结合 TSX 语法，提供灵活且高效的界面开发体验。
• 通过 Electron 构建桌面应用，可使用桌面原生功能。

功能

• 提供如按钮、输入框、列表等基础界面组件。
• 具备页面间导航与路由管理功能。
• 支持集成状态管理库以管理应用状态。
• 可集成 HTTP 库进行 API 请求。
• 能通过 Electron 集成桌面原生功能，如弹出通知、文件操作等。

安装使用步骤

前提条件

确保已安装 Node.js 和 npm（推荐使用 pnpm）。

具体步骤

1. 已下载本项目的源码文件。
2. 安装依赖：在项目根目录下运行 pnpm install。
3. 运行项目：执行 pnpm run dev 启动开发服务器。
4. 打包项目：执行 pnpm run build 对应用进行打包。

安装 Vue Devtools

1. 从 Chrome 应用商店 下载插件并放在本地项目的拓展目录，Mac 地址在 /Users/用户名/Library/Application Support/项目名/extensions。
2. 若 id 文件夹有版本号文件夹嵌套，需将其内部文件移至第一级目录。
3. 安装依赖：运行 yarn add electron-devtools-installer -D。
4. 在 main.ts 文件中添加以下代码： ```ts import Extension from 'electron-devtools-installer';

app.whenReady().then(() => { const vue_devtools_beta = { id: 'ljjemllljcmogpfapbkkighbhhppjdbg', electron: '>=1.2.1' }; Extension(vue_devtools_beta) .then(() => { console.log('Vue-tools安装成功 \n'); }) .catch((err) => { console.log('Vue-tools安装失败: \n', err); }) .finally(() => { new createWin(); }); }); ```

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】