vue3+electron开发桌面应用

于 2024-03-20 12:19:28 发布
阅读量598 收藏 3
点赞数 9
文章标签： electron vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvweijie941/article/details/136867471
版权

vue3+electron开发桌面应用

创建vue项目

win+R调用命令框

  • 安装vue脚手架
npm i @vue/cli -g

在这里插入图片描述

  • 创建vue项目
vue create vue-electron

在这里插入图片描述

  • 选择vue3
    在这里插入图片描述
  • 安装Vue CLI Plugin Electron Builder
# 进入项目
cd vue-electron
# 安装Vue CLI Plugin Electron Builder
vue add electron-builder

在这里插入图片描述
在这个过程中，由于网络的原因，Electron可能会安装失败，这时候如果node_modules文件夹中已经有electron文件夹（该文件夹是不完整的electron包，不能运行），那么删除这个文件夹，然后可以使用cnpm重新安装electron。或者挂个梯子。

在这里插入图片描述

  • 启动项目
npm run electron:serve

在这里插入图片描述
完毕！

微光•无单位
关注
  • 9
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
基于Vue+Electron构建桌面应用程序实践
01-27
为了快速入门，我使用了GregHolguin的electron-vue 样板。它给开发人员提供了vue-cliscanffolding、常见的Vue插件、打包器、测试、开发工具和其他功能。我们要构建一个跟上一篇文章中所述的一样的应用程序，基于OpenWeatherMap API的该应用程序用来查看用户所选择城市的天气情况。 Electron-vue样板是作为VueCLI2.x的模板构建的
Electron之集成vue+vite开发桌面程序
10-17
在electron中集成vue+vite框架开发桌面程序，此处是源代码，使用说明可以查看在线文档https://blog.csdn.net/BDawn/article/details/133887110
electron+vue3实现桌面端应用开发
08-18
vite+vue3+pinia 实现一个后台管理系统； 加入electron实现桌面端应用。 适合新手入门
vue3+vite+pinia+electron实现桌面端应用-自定义收藏夹功能
11-01
内容概要：通过vue3+electron实现一个基础的桌面端应用——收藏夹功能。使用了部分vue3的基本功能及方法，了解Electron的一下API的使用，开发中的常用的插件及依赖的使用方法。 适合人群：具备一定编程基础，对vue有一定的了解，工作1-3年的研发人员。 能学到什么： 1、使用pinia+localStorage数据持久化 2、使用unplugin-auto-import自动引入依赖 3、使用unplugin-vue-components自动引入组件 4、使用provide与inject实现组件间通信 5、实现electron主进程与渲染进程间相互通信 6、使用element-plus构建UI界面
vue3+electron开发桌面应用程序，搭建环境
u012115686的博客
12-17 98
vue3+electron开发桌面应用程序，环境搭建！最新版electron28.0.0+vue3.2.13，同时记录vue与electron之间通信
vue3集成electron
I_xuebi的博客
05-17 4963
vue3 vue 集成 electron 白屏 打包
小满Vue3第三十九章（Vue开发桌面程序Electron）
热门推荐
qq1195566313的博客
07-30 2万+
Electron官网我们用的VsCode也是electron开发的electron内置了Chromium和nodeJS其中Chromium是渲染进程主要渲染和解析HTML，Nodejs作为主进程，其中管道用IPC通信。
vue3+electron开发桌面软件入门与实战（2）——创建electron+vue3框架打包集成
关注前端，关注原创
10-13 5259
electron+vue3+vite+electron-builder项目级打包方案，vite配置讲解，vue打包编译讲解，package.json配置讲解
vue3+electron开发桌面软件入门与实战（1）——创建electron+vue3主体项目
关注前端，关注原创
10-09 7255
因为vue项目的默认入口文件是index.html，eletron项目的默认入口文件是main.js，所以这里我们就要解决两个框架搭配时，以哪个文件为入口。这个问题的答案可能很简单，但是其实体现的是vue和electron的关系。如果你仔细阅读electron官网并思考过，应该已经理解electron项目运行时，相当于是一个壳，壳里面集成了nodejs、v8引擎等必须的环境。
vue3+electron
weixin_43860369的博客
03-22 372
执行后项目即变成了VUE3+electron项目。三、修改项目8080默认运行端口。修改vue.config.js。一、进入项目目录，执行命令。
electron-vue开发桌面应用界面模板
11-01
一套使用electron-vue开发的桌面应用界面模板，解决最大最小化问题，解决主题变色问题，解决登录窗体透明问题，接着编写vue页面即可
vue3+ts+vite+electron搭建桌面应用
Bennett_G博客
04-04 1578
提示：开发桌面应用，就不得不提Electron ，之前使用vue+electron ,官方提供了Vue CLI Plugin Electron Builder,但是也只能使用了vue-cli(而且使用vue-cli-electron-builder构建，发现最新版本也才13,Electron最新版本都23了😅😅😅),随着vite的崛起以及ts,我们也需要与时俱进不是吗😃😃😃ts: ^4.9.3。
vue+electron 跨平台桌面应用开发实战教程
家有喜娟儿的博客
04-08 9070
默认即可
vue3+electron开发桌面软件0基础入门，搭建全网最简单的项目！
Taweiyue的博客
06-08 1987
3.1在跟目录下创建 electron文件夹，electron文件夹下创建主进程文件 main.js3.2然后在package.json配置入口，并删掉 "type": "module"
vue3+electron开发桌面应用，静态资源处理方式及路径问题总结
最新发布
autumngold的专栏
02-27 1612
的引用解析为相应模块的路径，并且，如果项目配置了相应的loader，Webpack 还会处理文件内容，可能会转换这些静态资源为 base64 URI，或者将其复制到输出目录，并修改为最终路径。当你的网站或应用需要在多个子路径或不同的环境中部署，而没有固定的根路径时，设置。目录下的静态资源时，例如图片或样式文件，Webpack 会使用相应的加载器(loader)来处理它们。这里的静态路径是指直接写死的字符串，动态路径是指vue中的响应式数据生成的路径。静态路径没什么好说的，写相对路径，vue会自动处理好。
Vue3 + electron项目构建方法
乳胶蚕丝被的博客
05-25 384
项目构建步骤： 1. 全局安装vue-cli脚手架 npm install -g @vue/cli 2. 创建一个vue3项目 vue create mydemo 3. 添加electron-builder插件 cd mydemo vue add electron-builder 项目结构： 运行结果 npm run electron:serve
electron 打包_Vue3+Electron整合方式
weixin_39747087的博客
11-25 1212
教程源码：nofacer/vue3-electron​github.com之前写过一篇文章Vue结合Electron构建跨平台应用（TDD）。当时的方法后来发现了一个问题，就是打包后的应用拿到其他机子上没法用，原因在于index.html的地址是个绝对路径，在打包的时候就被固定下来了。 在查阅了许多资料后发现之前将二者结合的方法不是很有效(开发和生产环境不一致等)，正好Vue3也进入beta阶段...
vue3结合electron
dpy521的博客
05-18 3019
electron+vue3,electron,vue3
vue3+electron开发桌面软件0基础入门
06-10
首先，Vue和Electron是两个不同的技术，Vue是一种用于构建用户界面的JavaScript框架，而Electron是一种用于构建跨平台桌面应用程序的框架，它使用Web技术（HTML，CSS和JavaScript）来构建应用程序。 如果你是0基础入门，首先需要学习Vue和Electron的基础知识。以下是一些学习资源： Vue： - Vue官方文档：https://v3.vuejs.org/guide/introduction.html - Vue Mastery：https://www.vuemastery.com/ - Codecademy：https://www.codecademy.com/learn/learn-vue Electron： - Electron官方文档：https://www.electronjs.org/docs - Udemy：https://www.udemy.com/course/electron-from-scratch/ - Pluralsight：https://www.pluralsight.com/courses/electron-fundamentals 一旦你学习了Vue和Electron的基础知识，你可以开始构建你的第一个Vue3+Electron桌面应用程序。以下是一些步骤： 1. 安装Vue CLI和Electron：使用npm安装Vue CLI和Electron。 ``` npm install -g @vue/cli npm install -g electron ``` 2. 创建Vue项目：使用Vue CLI创建一个新的Vue项目。 ``` vue create my-electron-app ``` 3. 添加Electron支持：在Vue项目中安装electron-builder。 ``` cd my-electron-app vue add electron-builder ``` 4. 编写代码：你现在可以开始编写Vue和Electron代码了。你可以在Vue组件中使用Electron API来访问系统资源。你可以在Electron主进程中编写Node.js代码以访问底层系统资源。 以上是一个简单的介绍，希望对你有所帮助。祝你好运！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微光•无单位

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值