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

huanglishi · · 1197 次点击    
这是一个分享于 的资源,其中的信息可能已经有所发展或是发生改变。
​ ## 桌面应用行情 虽然移动端的发展影响了桌面应用需求,在万物互联的市场需求下,桌面应用(跨平台需求)又得到新的发展,下面引用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. ~~~  [gitee代码下载地址](https://gitee.com/huang_li_shi_admin/vite_electron)  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 切换开发者控制台 ​ ​

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

1197 次点击  
加入收藏 微博
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传