手把手教你使用Electron13+vue-cli3+element-ui开发跨平台桌面应用（三）

最新推荐文章于 2025-07-09 14:41:04 发布
最新推荐文章于 2025-07-09 14:41:04 发布
阅读量1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Electron 文章标签： vue.js ui elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/oXingYunWangZi1/article/details/121824516
本文指导如何在Vue项目中集成Electron，通过`vue add electron-builder`自动安装最新版本的Electron，并详细说明了编译与启动开发环境APP的步骤。在完成安装后，可以通过`npm run electron:serve`启动APP。此外，还提及了引入element-ui的相关命令。

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

1.5 自动安装electron

进入到项目根目录，执行：

vue add electron-builder

接下来出现配置选项：

? Choose Electron Version (Use arrow keys)
  ^3.0.0 
  ^4.0.0 
❯ ^5.0.0

选择Electron最高版本。

1.7 编译并启动APP

执行以下命令，开始编译APP，并启动开发环境APP：

npm run electron:serve

首次启动可能会等待很久，出现以下信息：

 运行成功展示

1.8 element-ui

npm i element-ui -S

Electron 与 vue 框架结合 + element UI框架 快速入门教程
爱我非你莫属的博客
05-21 5389
1. 安装Node npm install -g cnpm --registry=https://registry.npm.taobao.org 2. 安装/升级vue-cli 先执行以下命令，确认下本地安装的vue-cli版本。 vue -V 如果没有安装或者不是最新版，可以执行以下命令安装/升级。 npm install @vue/cli -g 3. 安装Electron 插件 cnpm install -g electron 验证是否安装成功 electron --version 4. 用v
electron+vue+elementui+serialport实现串口通信
defore2008的专栏
04-03 2245
网上的教程确实很多，但大多数基于框架版本比较老旧，不适用于现在高版本的electron。经过2个星期的淬炼，终于把这个electron+vue+elementui+serialport环境给搞透了。我的电脑环境版本如下。
electron+elementui
weixin_44260298的博客
04-06 1789
下载electron-vue vue init simulatedgreg/electron-vue admin 进入建好的项目目录 npm install npm run dev 此时的目录结构如下： 安装elementui cnpm install --save element-ui cnpm install --save-dev node-sass cnpm install --save-dev sass-loader cnpm install --save font-aweso.
Electron与Vue3结合开发桌面应用教程
最新发布
weixin_36178216的博客
07-09 712
Electron是一个由GitHub开发的开源框架，允许开发者使用JavaScript、HTML和CSS等Web技术来创建跨平台的桌面应用程序。这个框架通过将Chromium和Node.js集成到一个单一的应用程序中，使得开发者能够利用Web技术的强大功能来构建具有原生桌面体验的应用。Pinia是在Vuex的基础上发展起来的，旨在解决Vuex在Vue3中遇到的一些兼容性问题，以及提供一个更为简洁和灵活的状态管理解决方案。以下几点是Pinia与Vuex的主要区别：模块化管理。
Electron-Vue-ElementUI环境搭建
ordinary_brony的博客
09-26 2206
一开始Vue生态还尚未完善的时候，Electron和其他框架很难整合。现在Vue生态逐步完善了，整合Electron也方便很多了。注：本篇将默认大家都会使用nodeJS。
手把手教你使用Electron13+vue-cli3+element-ui开发跨平台桌面应用（一）
oXingYunWangZi1的博客
12-09 712
1.下载Node.js 安装 下载地址：https://nodejs.org/zh-cn/download/，安装长期稳定版本，可以通过命令验证您是否已经安装 2 安装npm 查看npm当前版本 npm -v 如果不是最新版本，运行指令 npm install -g npm 如果想更新到指定版本，运行指令 npm -g install npm@6.8.0 3.创建项目 1.1 使用cnpm加速下载 npm有时下载速度很慢，可以安装cnpm，从国内淘宝镜像下载，...
1.electron vue element-ui环境搭建
kerwin的专栏
05-24 597
electron vue 环境搭建目录前言准备工作过程与问题参考资料 目录 前言 之前一直用C,C++，对前端的知识了解的很少（仅在之前做打印时用了html）。最近因为某种原因，想开发一个类似于STM32CUBEMAX工具的软件。之前写APP时都是用QT。但这次真不想用QT了。决定学习一下electron。 准备工作 工作平台：win10 安装node.js vscode 等工具。 过程与问题 基本环境弄好后，在poweshell下 管理员权限运行。 在当前工程目录下，输入 vue init simu
electron-vue + vue-cli + element-ui 实时热更新版v12.0.4框架.rar
05-06
electron-vue + vue-cli + element-ui 实时热更新版，electronv12.0.4框架，打包好的框架，拿来即用，实时热更新，提高开发3倍效率
13章Electron+Vue3+AI+云存储-实战跨平台桌面应用
11-14
本课程《13章Electron+Vue3+AI+云存储-实战跨平台桌面应用》便是为了满足这一需求而设计的，旨在传授如何利用最新的技术栈来构建既跨平台又具备智能化特性的桌面应用。 课程内容涵盖了Electron、Vue3、人工智能（AI...
electron-vue + vue-cli + element-ui 实时热更新版v2.0.18框架.rar
05-06
electron-vue + vue-cli + element-ui 实时热更新版，electronvv2.0.18框架，打包好的框架，拿来即用，实时热更新，提高开发3倍效率
用vue-cli3+Electron开发一个跨平台的桌面应用（这里只是搭建了项目）
01-08
安装vue-cli3（这里使用的是yarn，进行这一步的前提是安装好node和yarn） yarn global add @vue/cli vue --version （此命令意在查看vue的版本，可确认是否安装成功，） ## 2. 创建vue项目 vue create vue-...
Vue+Electron（electron-builder + electron-updater + electron-log）
09-06
使用Vue+Electron（electron-builder + electron-updater + electron-log）实现桌面应用程序的开发，面向所有electron使用者学习使用，内部源码都有注释。可参考文章（http://t.csdn.cn/BLM6Y）使用。
Photon使用HTMLCSS和JS为Electron开发原生UI界面
08-10
Photon - 使用HTML，CSS和JS为Electron开发原生UI界面
手把手教你使用Electron13+vue-cli3+element-ui开发跨平台桌面应用（二）
oXingYunWangZi1的博客
12-09 689
如果还没有安装vue-cli3，先执行以下命令安装： cnpm install @vue/cli -g 如果你已安装vue-cli3，但不是最新版本，可执行以下命令升级： npm update @vue/cli -g 1.4 创建vue项目 找个喜欢的目录，执行以下命令，创建vue项目： vue create electron-vue-demo 回车之后 Vue CLI v3.8.4 ? Please pick a preset: (Use arrow keys) default
uni-app中使用Element UI的正确姿势：打造优雅的跨平台应用界面
Jiaberrr的博客
10-06 5715
本文将详细介绍在uni-app项目中如何集成并使用Element UI，帮助开发者快速构建美观、响应式的跨平台应用界面。
使用 ElementUI 组件构建 Window 桌面应用探索与实践（WinForm）
静心编程，禅意生活。
11-02 1072
基于 CEF 实现 Vue + Vite + ElementUI 组件构建 Window 桌面应用（WinForm）
electron + vue3 + element-plus + blockly项目搭建与踩坑
qq_44402992的博客
04-19 2605
前端小白初次接触electron+blockly
React Native Elements：跨平台的UI工具包
gitblog_00502的博客
08-15 384
React Native Elements：跨平台的UI工具包 在移动应用开发的世界中，选择合适的UI工具包可以极大地提升开发效率和用户体验。今天，我们要向大家推荐的是一个强大的开源项目——React Native Elements。这个项目不仅支持跨平台开发，还提供了丰富的UI组件，让你的应用在iOS和Android上都能展现出一致且优雅的界面。 项目介绍 React Native Elemen...
用vue-cli+Electron开发一个跨平台的桌面应用____篇二（简化项目、安装Element）
ddx2019的博客
04-21 789
一、 简化项目，稍作调整 （删除一般项目中用不到的文件，简化代码，最简化项目；修改package.json文件，微改一下运行所输入的命令） 在开发工具中打开篇一中创建的名为vue-electron-demo的项目： 删除 HelloWorld.vue （一般用不上，后续需要的时候自己创建，删除后会报错，故需修改代码） assets下的logo.png也可删除： views下的Home组件 修...
electron-vue + vue-cli + element-ui 实时热更新版
08-09
electron-vue是一个基于Vue.js和Electron的开发框架，可以用来快速构建跨平台的桌面应用程序。它集成了vue-cli和element-ui，使得开发者能够使用Vue.js的开发方式来构建桌面应用，并且可以使用element-ui的组件库来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值