Vue开发跨端应用（二）修改electron demo

最新推荐文章于 2025-06-22 11:55:23 发布
原创 最新推荐文章于 2025-06-22 11:55:23 发布 · 691 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#桌面应用 #web #electron #vue

本文介绍如何将基于Electron的桌面应用转换为纯Web应用的过程。主要内容包括删除Electron特有的组件、调整Vue组件以及修改路由配置等步骤。

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

项目启动

npm run dev

界面如下：


我们需要删除electron特有的组件，因为里面使用到了一些web没有的属性

删除vue组件：


新建index.vue


接下来修改router



打开运行桌面应用效果如下：


Electron-vue基本介绍及demo代码
日常笔记/总结/系列知识梳理
12-22 732
Electron-vue 是一个基于 Electron 和 Vue.js 的框架，用于开发桌面应用程序。它结合了 Electron 的跨平台能力和 Vue.js 的灵活性和易用性，使开发人员可以使用常见的前端技术来构建功能丰富的桌面应用程序。使用 Electron-vue，开发人员可以利用 Vue.js 的开发模式和组件化架构来构建桌面应用程序。它提供了一些预设的配置和工具，使开发人员可以更快地启动项目，并轻松地集成 Electron 和 Vue.js。你可以根据自己的需求进一步开发和定制化。
electron结合vue开发跨多端桌面软件
qq_37312180的博客
11-25 298
electron结合vue开发跨多端桌面软件。
Electron-Vue入门Demo
玩火的稻草人的博客
11-20 2276
前提条件，Electron框架能够正常的运行（electron环境的配置不是本文要说明的部分） 1，安装vue的环境模块 npm install -g vue-cli 2，初始化vue工程 vue init webpack demo 下面几个选项注意 Install vue-router? yes Use ESLint to lint your code? no Set up unit tes...
Electron + Vue3 进程通信全攻略——主进程与渲染进程的那点事。
最新发布
专研技术的大学生:会点Java和前端
06-22 1066
本文对比了Electron中主进程与渲染进程通信的两种方式。传统send+on模式适合单向通知，需手动管理回复逻辑；现代invoke+handle模式基于Promise，简化了双向通信和错误处理。对于主进程主动推送数据，推荐使用webContents.send实现实时通信。文中提供了Vue3项目中的完整代码示例，建议根据场景需求选择通信方式：无返回值用send，需要返回数据用invoke，实时推送用webContents.send。
vue-electron-demo构建
凉酱的博客
01-22 563
官方的electron-vue文档????这种方法试了好多次一直网络超时下载不了，没找到原因，也可能单纯的网络原因？最后找了一种先构建vue项目再用electron-builder的方式，实现了，记录一下。 1.创建vue项目可以参考文章????搭建环境，这里不赘述了。 vue create vue-demo 2.进入创建好的vue项目cd vue-demo 然后下载 vue add electron-builder 这里遇见了一直一直下载不成功的问题，加sudo也还是不行 最后是su进入管理员权限，然
electron-vue-print-demo:electron+vuecli3 实现打印小票功能
05-25
electron-vue-print-demo electron+vuecli3 实现设置打印机，静默打印小票功能 使用 git clone https://github.com/sunniejs/electron-vue-print-demo.git npm install npm run electron:serve 生成效果 实现 操作思路 1.用户点击打印 2.查询本地 electron-store(用来向本地存储，读取数据)是否存打印机名称 3.已经设置，直接打印 4.没有设置，弹出设置打印机框 5.用户设置好确认后打印 问题反馈 有什么问题可以提 issue 或扫描微信二维码跟我联系，项目持续优化，加群获取最新更新消息 关于我 您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。 如果对你有帮助送我一颗小星星（づ￣3￣）づ╭:red_heart:～
Electron开发 —— 简单demo之整合vue
qq_16670995的博客
08-25 1217
总得有个开始 前置条件： Electron开发 —— 简单demo vue开发 —— 简单demo vscore编辑器（非必须，自选喜欢即可） 本系列始终以win系统描述、mac和linux各大发行版操作基本相同，命令或许不同，请自行查阅官网 一：步骤： 1. 利用上一章节的demo，以及之前的vue开发系列，vue项目开发有2种模式，一种脚手架CLI生成，一种直接js引用，此处因为利用上一章...
用vue-cli3+Electron开发一个跨平台的桌面应用（这里只是搭建了项目）
01-08
vue create vue-electron-demo （vue-electron-demo是你要创建的项目名称） ##3 . 创建vue项目过程，选常用模块以及配置 此时需要选择项目的一些配置，选定敲回车，出现的顺序以及基本选择如下：（上下键，空格是...
vue+electron一个简单的demo
02-20
在当今的前端开发领域中，Vue.js作为一个流行的JavaScript框架，被广泛应用于构建用户界面和单页应用程序。...通过不断的技术迭代和优化，可以预见Vue+Electron组合将会是未来桌面应用开发的一个重要趋势。
使用electron+vue集成跨平台桌面应用程序
03-17
在现代Web开发中，利用 Electron 和 Vue.js 集成技术可以轻松地创建跨平台的桌面应用程序。 Electron 是一个基于Chromium和Node.js的框架，它允许开发者使用Web技术（HTML、CSS和JavaScript）来构建桌面应用。Vue.js...
electron安装+vue实现录屏的的demo
Z网球的博客
05-09 7896
github地址：https://github.com/zengwangqiu/electron-vue 安装electron最好采用cnpm 主进程 main/index.ts import path from "path"; import window from "./window"; import { dialog, app, ipcMain, globalShortcut, Notification, shell, screen } from "electron"; let mainWindow:
electron打包window应用.exe文件demo
11-30
electron.js打包成window应用的具体方法和案例，附带代码以及简约操作文档。
简单的桌面化登录系统DEMO，electron-vue3-element-plus.zip
01-04
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者，能够帮助你快速上手Qt并掌握其高级特性。
electron-vue初探
汉堡会有的
03-12 5576
前端技术发展迅速，各种框架层出不穷，不外乎要借助浏览器去实现渲染。 最近一朋友想让我帮他做个打印机的插件，实现打印特定内容的功能，但又不接受网页的形式，于是技术选型我选择了electron，正好我之前也没玩过electron，就决定搞个桌面端demo试试。 什么是electron? Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负...
Electron+vue 做一个桌面应用
meixinmeifei__的博客
03-14 381
Electron+vue
使用electron与vue搭建起步项目，并定制化窗口
pocher的博客
02-27 5756
话不多说，先上最终成果 第一步：安装node.js 首先确保你安装了node.js  没有安装的话去官网下载安装https://nodejs.org/zh-cn/  不推荐使用最新版本，因为有可能electron还不支持最新版的node.js，建议从8.0以上的版本开始 （注意：npm 命令被集成到了node.js里，安装node的时候已经自动将npm安装了。） 以往各个版本下载链...
Electron + Vue 项目从零创建，不使用 vue-electron-template
qq_41575208的博客
04-17 2130
Electron + Vue + Vite项目构建
Electron + vue搭建项目
江一铭
11-22 5002
最近公司想要开发一款桌面应用，在众多的跨平台桌面框架中，我选择了electron，主要的原因是electron使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。2、创建好项目，使用vue ui 添加插件 vue-cli-plugin-electron-builder，项目自动生成为electron项目。5、添加启动命令 "electron:serve": "vue-cli-service electron:serve"1、首先需要安装npm install -g vue-cli。
shell 报错：command not found，或换行符无效
薰珞婷紫小亭子的博客
11-26 8587
shell 报错：command not found，或换行符无效 一、问题描述 在用.sh命令执行文件的时候，发现，读取不到内容，或者报错“command not found”。 二、错误原因 出现该问题的原因是，因为.sh文件中，出现了CR LF字符，CR LF是Windows中的换行符，linux中的换行符是LF 三、解决方案 1.错误解决方案 最初的解决方案是将.sh文件的内容，拷贝至notepad++软件，通过下图的操作，显示.sh的符号，从图可以看到原始的.sh文件中，存在CR LF 最“想
利用Electron和Vue构建跨平台桌面应用指南
通过本文的介绍，可以看出利用Electron和Vue.js构建跨平台桌面应用程序是一个结合了前端开发经验和桌面应用开发特点的过程。开发者不仅可以利用Web开发的便捷性，同时也能享受到桌面应用的强大性能和良好的用户体验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值