只要你会前端的vue框架就可以开发电脑桌面应用-vite+vue+Electron ...

桌面应用行情

虽然移动端的发展影响了桌面应用需求，在万物互联的市场需求下，桌面应用（跨平台需求）又得到新的发展，下面引用 Laura Grant 文章一段说明：

‘Cross-platform’ is the new ‘it’ girl (or guy). Having your apps perform on multiple operating systems, devices, screens, and other platforms is becoming the new norm. Gone are the days of single-platform applications – even if expanding your app is not a Phase One priority, knowing that you have the possibility to do so, easily, and seamlessly, should be an important consideration. The last thing you’d want is for there to be demand for your service on an operating system, but not being able to cater to it.

“跨平台”是新的“it”女孩（或男孩）。让您的应用程序在多个操作系统、设备、屏幕和其他平台上运行正在成为新的规范。单一平台应用程序的时代已经一去不复返了——即使扩展应用程序不是第一阶段的优先事项，但知道自己有可能轻松无缝地扩展应用程序也应该是一个重要的考虑因素。你最不希望的是在操作系统上有对你的服务的需求，但不能满足它。

Creating your desktop or mobile applications in a ‘software agnostic’ manner allows for them to be deployed wherever and whenever suits you, reaching audiences no matter their preferred device of choice. With Qt, your development doesn’t need to stop there, but can also be extended to the web, with the help of WebAssembly .

以“软件不可知”的方式创建桌面或移动应用程序，使其可以随时随地部署到适合您的位置，无论其首选设备是什么，都能接触到受众。有了Qt，您的开发不必止步于此，还可以借助WebAssembly扩展到web。

由于现在开发的应用不在是单一平台应用，要求项目在多个操作系统、设备、屏幕和其他平台上运行。因此选择一个桌面框架可能就像选择一位候选人在大选中投票一样；承诺和乐观，并总体感觉该决定的影响将在未来几年内感受到，要求框架能购减少人员投入、快速开发、最好是前端技术员用一套技术就可开发，免去技术框架切换带来成本增加。为了这个目标，我们GoFLy本着大道至简思想用vite+vue3基于Electron集成一套桌面应用快速开发框架，让前端技术员用Vue就可以开发跨平台桌面应用。目前框架引入Arco DesignUI框架。

了解更多请到到框架官方网站介绍

1. 代码下载

git clone https://gitee.com/huang_li_shi_admin/vite_electron.git

gitee代码下载地址

2. 初始项目

 yarn install

3. 运行

yarn dev

可以看到创建了一个dist-electron文件夹，同时打开了一个桌面应用

4. 打包

yarn build

成功后会生成一个release文件夹，在里面就能看到打包好的exe安装包了。

单独安装Electron

先配置下镜像，不然下载和打包时都会超时出错

yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/
yarn config set electron_builder_binaries_mirror https://npm.taobao.org/mirrors/electron-builder-binaries/

1. 接下来开始安装electron

yarn add electron -D

2. 接着安装vite-plugin-electron插件

该插件用于配置electron打包编译的文件入口

yarn add vite-plugin-electron -D

开发注意事项

ctrl+shift+i 切换开发者控制台

GoFLy本着大道至简思想用vite+vue3基于Electron集成一套桌面应用快速开发框架，让前端技术员用Vue就可以开发跨平台桌面应用。目前框架引入Arco DesignUI框架。

用 vue 做桌面 应用程序 维多 (vuido) Create native desktop applications for Windows, OS X and Linux using Vue.js . 使用 Vue.js 为Windows，OS X和Linux创建本机桌面 应用程序 。 Vuido makes it possible to create lightweight, native deskt...

用 vue 做桌面 应用程序 设定精灵 (Setup Wizard) This page allows you to pick and install multiple apps at once through your mac's terminal using brew. 该页面允许您使用brew通过Mac终端一次选择并安装多个 应用程序 。 View Demo 查看演示 View Github

## 1. 安装 vue -cli3（这里使用的是yarn，进行这一步的前提是安装好node和yarn） yarn global add @ vue /cli vue --version （此命令意在查看 vue 的版本，可确认是否安装成功，） ## 2. 创建 vue 项目 vue create vue - electron -demo （ vue - electron -demo是你要创建的项目名称） ##3 . 创建 vue 项目过程，选常用模块以及配置此时需要选择项目的一些配置，选定敲回车，出现的顺序以及基本选择如下：（上下键，空格是选择，enter是确定） ? Please pick a preset:

这将启动 Electron 应用程序 并打开一个窗口，其中包含 Vue 应用程序 。您可以使用 Electron 的API在窗口中添加菜单、对话框、本地文件系统和其他功能。 6. 最后，您可以将您的 应用程序 打包为可执行文件，以便将其分发给其他用户。使用 Electron Builder可以轻松地将您的 应用程序 打包为Windows、Mac和Linux可执行文件： npm install --save-dev electron -builder 然后，您可以在package.json中添加以下脚本： "scripts": { "build": " electron -builder" 运行`npm run build`，将生成可执行文件。