文件下载是我们开发中比较常见的业务需求,比如:导出 excel. web 应用文件下载存在一些局限性,通常是让后端将响应的头信息改成 Content-Disposition: attachment; filename=xxx.pdf,触发浏览器的下载行为. 在 electron 中的下载行为,都会触发 session 的 will-download 事件.在该事件里面可以获取到 downloadItem 对象,通过 downloadItem 对象实现一个简单的文件下载管理器: 1. 如何触发下载

背景 目前社区两大Vue+Electron的脚手架:electron-vue和vue-cli-plugin-electron-builder, 都有这样那样的问题,且都还不支持Vue3,然而Vue3已是大势所趋, Vite势必也将成为官方Vue脚手架, 下图是尤雨溪在开发好Vite之后与webpack之父的对话 所以开发一个Vite+Vue3+Electron的脚手架的需求日趋强烈 我前段时间做了一个, 但是发现了一些与Vite有关的问题, 比如:Vite会把开发环境的process对象吃掉的问

最近一直在折腾Vue3+Electron技术结合的实践,今天就来分享一些vue3.x和electron实现开启多窗口功能. 开始本文之前,先来介绍下如何使用vue3和electron来快速搭建项目. 目前electron.js的star高达89.3K+,最新稳定版v11.2.3. 使用vue开发electron应用,网上有个比较火的脚手架electron-vue,不过里面的版本太低,而且使用的是vue2.x语法. 今天主要分享的是vue3语法开发electron应用,所以只能手动搭建开发环境.

基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat. 使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3layer等技术构建跨平台模仿QQ|TIM界面聊天应用.实现了发送富文本消息.图片/视频/链接预览.拖拽发送图片.调用dll截图.朋友圈等功能.支持多开窗口|父子modal窗口.换肤等操作. 一.技术栈 编码工具:vscode 框架技术:vue3.0+electron11.2.3+vuex4+vue-rou

上一篇有给大家分享过使用vue3和electron快速搭建项目.创建多窗口/父子modal窗口的一些方法.今天继续给大家分享一些vue3.x+electron11项目开发中的一些知识点/踩坑记录,希望对你有帮助~~ 1.vue3+electron实现QQ登录界面 <template> <div> <div class="ntMain__cont flex1 flexbox flex-col"> <div class="nt__lgre

整合vite2+electron12跨平台仿抖音电脑版实战Vite2-ElectronDouYin. 基于vite2.0+electron12+vant3+swiper6+v3popup等技术跨端仿制抖音短视频+聊天+直播桌面版应用.实现短视频上下拖拽滑动.评论/聊天.执行dll截图.最小至托盘.支持键盘上下键切换.新开多窗口等功能. 一.使用技术 编辑器:VScode 框架技术:vite2.1.0+electron12.0.1+vuex4+vue-router@4 组件库:vant^3.0.1

基于vue3.0.11+electron13仿制macOS桌面UI管理系统ElectronVue3MacUI. 前段时间有分享一个vue3结合electron12开发后台管理系统项目.今天要分享的是最新研发的跨平台仿macOS桌面UI管理框架.使用了最新前端技术electron13+vite2.3+vue3搭建开发.支持多窗口.动态壁纸.程序坞DOCK菜单.可拖拽等功能. 一.实现技术 编辑器:Vscode 框架技术:Vite2.3.4+Vue3.0.11+Vuex4+VueRouter@4 跨

uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对话框.actionsheet底部动作框.toast轻提示.长按定位菜单)等功能. 如下图:H5+App端+小程序效果,亲测多端运行一致. ◆ 引入使用  ▍在main.js中引入uapopup弹框组件 // 引入自定义弹框组件 import uaPopup from './components/ua

不要让自己的上限成为你的底线 前言 诈尸更新系列,为了跟上脚步,尝试了vue3,在学习vue3的时候顺便学习一手electron和ts,本教程将分别发布,源码会在最后的文章发布.因为还在开发中,目前也是为了防止有些遇到坑不会及时忘掉,所以先整理一部分出来 将分2部分发出教程,因为配置的东西个人感觉有点多并且跟开发内容相关的东西并不是很多,因此单独发出,见谅,第二篇这两天发出,长文警告!. 开发思路: 页面: 列表页index.vue 头部.搜索.内容部分,只能有一个列表页存在 设置页settin

不要让自己的上限成为你的底线 本来以为有万字的..没想到才堪堪近6000字.为了水文的嫌疑,只挑了重点的地方讲,比如component内的组件就挑了右键弹窗去说明,建议在看本文的时候边查看项目,有不懂的可以在下方评论,谢谢. github github: https://github.com/heiyehk/electron-vue3-inote 包下载 release: https://github.com/heiyehk/electron-vue3-inote/releases 接上篇配置篇

转自 [https://orchidflower.oschina.io/2017/03/29/Using-Vue-Devtools-in-Electron/] 2.2 安装步骤 首先在Chrome中安装Vue Devtools: 在Chrome中打开about:extensions,并且开启开发者模式,这样就可以获取扩展程序的ID,记住这个ID,例如我这边的值是nhdogjmejiglipccpnnnanhbledajbpd,下面需要用到. 打开文件管理器或者Finder,导航到Chrome保存

导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更新(六)构建.发布整个项目(包括client和web) 摘要:整个项目就剩最后一哆嗦了,但仅仅是当作demo模版来说,实际项目的话,还有很多需要细化的地方.项目完整代码:https://github.com/luohao8023/electron-vue-template,随博客更新. 一.打包客户

前端技术在最近几年迅猛发展,在任何开发领域我们都能看到前端的身影,从PC端到手机端,从APP到小程序,似乎前端已经无所不能,这就要求我们需要不断地去学习来提升自己!前段时间尤大通过直播介绍了一下Vue3.0开发的心路历程并放话今年发布,Deno v1.0 的发布,扬言要干掉Node,摸了摸日渐稀疏的头发,表示真心学不动了,但摸了摸干瘪但口袋表示扶我起来我还能学! 接下来我们要说到但是一个可以开发桌面级应用的框架Electron. 先简单介绍一下Electron,它是由GitHub团队开发,目前在

缘起 在Electron的渲染进程中(也就是页面代码中), 我们常常使用process.env来携带一些环境变量, 比如HTTP服务地址的基质,本地静态资源的路径等 这样做主要有两个目的 一个是方便开发者写多个配置环境变量的文件,区分生产环境.测试环境和开发环境 另一个是主进程和渲染进程共享一套环境变量,全局任何一个地方都随取随用,非常方便 正因为如此,一般的编译工具都不会动用户的process对象 但Vite不一样,Vite的作者认为Vite只是给Web(运行在浏览器中的)产品提供服务的, 所

作者:秦志英 前言 上一篇文章中我们分析了Vue3响应式的整个流程,本篇文章我们将分析Vue3中的computed计算属性是如何实现的. 在Vue2中我们已经对计算属性了解的很清楚了,在Vue3中提供了一个computed的函数作为计算属性的API,下面我们来通过源码的角度去分析计算属性的运行流程. computed export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T> export

一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/gif图.图片/视频预览.网址查看.下拉刷新功能.红包/朋友圈等功能. 二.技术选型 编辑器:VScode/Sublime 使用技术:Vue3.x+Vuex4.x+Vue-Router4 UI组件库:Vant-UI3.x (有赞移动端Vue3组件库) 弹层组件:V3Popup(基于vue3.0封装自定

主要内容: vue-cli2和3的区别 创建vue-cli3脚手架 vue-cli3项目的目录结构 vue-cli2和vue-cli3中 main.js文件的区别 vue-cli3的配置文件管理 一. vue-cli2和vue-cli3的区别 vue-cli3 是基于webpack4的, vue-cli2是基于webpack3 vue-cli3的设计原则是"0配置", 移除了配置文件根目录下build和config等目录 vue-cli3 提供了vue ui命令, 进行可视化配置, 操

是从 Vue 2 开始学基础还是直接学 Vue 3 ?尤雨溪给出的答案是:"直接学 Vue 3 就行了,基础概念是一模一样的." 以上内容源引自最新一期的<程序员>期刊,原文链接为<直接学 Vue 3 吧 -- 对话 Vue.js 作者尤雨溪>. 前言 Vue 3.0 出来之后,我一直在不断的尝试学习和接受新的概念.没办法,作为一个前端开发,并且也不是毕业于名校或就职于大厂,不断地学习,培养学习能力,才是我们这些普通前端开发的核心竞争力. 当然,有些同学抬杠,我

前一溜时间有给大家分享一个 electron+vite跨端短视频 项目.这次分享的是vite2.x和electron实现跨平台后台框架,支持国际化多语言配置.导航菜单+树形菜单两种路由菜单模式.展开/收缩路由菜单等功能. vite2-electron-system 后台模板框架使用到的版本:vite2.1.51.vue3.0.5.electron12.0.4 vite2.x|vue3-i18n国际化多语言 项目支持如下图3种语言切换[中文/英文/繁体],使用Vue I18n国际化vue3版本.

基于vite2.x+electron12桌面端后台管理系统Vite2ElectronVAdmin. 继上一次分享vite2整合electron搭建后台框架,这次带来的是最新开发的跨桌面中后台权限管理系统.使用最新的前端技术栈,内置 i18n 国际化解决方案,动态权限路由,权限验证,整合了典型的表格/表单等业务模块功能. 一.技术栈 编码器:vscode vue3技术:vite2.1.5+vue3.0+vuex4+vue-router@4 跨端框架:electron^12.0.4 打包工具:vue

从零搭建基于webpack的Electron-Vue3项目(1)--基于webpack的Vue3项目搭建 前言 本篇文章内容,主要是基于webpack的Vue3项目开发环境进行搭建,暂时还不涉及到Electron的整合.可以独立的当作一个内容来进行阅读. 项目创建 创建目录electron-vue3-webpack并进入执行npm init命令.设置了基础的项目信息后,我们开始本次的环境搭建之旅. 使用webpack 前置条件 基本熟悉webpack是什么以及它打包的运行处理过程. 环境准备 前