electron-vue学习(一)：环境搭建

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

本文档详细介绍了如何在Node v12.10.0和npm v6.10.3环境下，使用vue-cli和electron-vue样板项目创建并启动一个Electron-Vue应用。包括安装依赖、常见错误处理等关键步骤。

基础环境

node：v12.10.0
npm：6.10.3

版本尽量不要相差太大，否则可能会出现一些版本问题。

安装vue-cli

npm install -g vue-cli

安装electron-vue样板项目

vue init simulatedgreg/electron-vue （项目名称）

安装相关依赖

进入创建好的项目内

cd （项目名称）

执行安装命令，(在这里很容易出现依赖安装报错问题，原因繁多，出错建议使用cnpm或者yarn试试)

npm install

首次启动

npm run dev

如果启动后页面没有正常显示，报错 process is not defined可以点后面的链接解决，报错：Webpack ReferenceError: process is not defined

在这里插入图片描述

electron-vue 入门
qq_36248539的博客
05-27 2273
electron-vue 简要介绍 vue只是在renderer进程里使用的框架，不涉及到main进程。如下图： 大体的项目结构如下，根据选择的不同设置结构会有所不同： my-project ├─ .electron-vue │ └─ <build/development>.js files ├─ build │ └─ icons/ ├─ dist │ ├─ electron/ │ └─ web/ ├─ node_modules/ # npm install ├─ src │ ├─
【electron-vue】教程：从零开始搭建跨平台桌面应用
freeGameBox的博客
06-02 2757
要打包和发布electron-vue应用，你需要先在package.json文件中配置一些信息，例如应用名称，版本，描述，作者，许可证等。要使用electron-vue，你需要先安装Node.js和npm，然后全局安装vue-cli，这是一个用于创建vue项目的命令行工具。这个命令会让你输入一些项目信息，例如项目名称，描述，作者等，然后会自动下载electron-vue模板并安装依赖。这个命令会使用electron-builder来打包应用，并根据你的操作系统生成相应的安装文件。
Electron-Vue环境搭建
Mu_Soul的博客
05-09 331
安装vue npm install -g @vue/cli 创建vue项目 vue create app_name 在vue项目下搭建Electron环境： 1、 cd app_name 2、 vue add electron-builder 运行Electron项目：npm run electron:serve
Electron + Vue3项目落地实践（大型管理系统桌面化改造实录）
最新发布
DebugLoom的博客
10-23 414
解决大型管理系统桌面化难题，本文分享基于JavaScript Electron开发的实战经验。结合Vue3构建高性能桌面应用，详解架构设计、性能优化与打包部署关键步骤。适用于企业级管理工具改造，提升交互体验与运行效率。值得收藏的完整实践指南，点击了解实现细节。
electron vue 搭建
S_0527的博客
12-19 1606
electron-vue框架搭建
Electron实战之环境搭建
xiangzhihong8的专栏
02-22 3468
工欲善其事必先利其器，在进行实战开发的时候，我们最终的步骤是搞好一个舒服的开发环境，目前支持 Vue 的 Electron 工程化工具主要有 electron-vue、Vue CLI Plugin Electron Builder、electron-vite。接下来我们将分别介绍基于 Vue CLI Plugin Electron Builder 和 electron-vite 的开发环境搭建。
electron-vue
web_q的博客
08-28 1258
又在死亡的边缘试探 要写一个桌面应用 (ps电脑重做系统 node模块出现了问题 安装的时候选择自动把npm到全局变量里) 文档electron-vue     https://simulatedgreg.gitbooks.io/electron-vue/content/cn/ 官网 https://electronjs.org/ 一  先构建一个初始项目 $ vue init simul...
electron-vue项目从搭建、运行到打包（以及electron-vue的bug修改）
欢迎来到iceseasyh的博客
12-12 4886
electron-vue 的项目搭建、运行到打包
基于simulatedgreg/electron-vue修改优化后的electron-vue项目设计源码
09-26
将Electron与Vue结合在一起，形成了electron-vue这一特定的项目结构，旨在利用两者的优势，为开发者提供构建桌面应用的强力工具。 本项目“基于simulatedgreg/electron-vue修改优化后的electron-vue项目设计源码”...
第十一章：Electron-Vue创建项目
2401_84434954的博客
04-27 1150
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】})开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-hlEdgwfB-1714199063501)]
electron-vue利用webpack打包实现多页面的入口文件问题
10-17
`electron-vue` 是一个预配置的 `Vue.js` 和 `Electron` 开发环境，它整合了 `vue-cli` 和 `webpack` 配置，使得在 Electron 中使用 Vue.js 更加方便。 **1. Webpack 的核心概念** 在深入讨论多页面配置之前，我们...
Electron-vue
热门推荐
Growing up Or Growing old
01-15 1万+
Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。通过将Chromium和Node.js嵌入到其二进制文件中，Electron 允许您维护一个 JavaScript 代码库并创建可在 Windows、macOS 和 Linux 上运行的跨平台应用程序——无需原生开发经验。......
【electron-vue】 一、elecron-vue 环境搭建
qq_34416331的博客
06-08 546
一、环境搭建 1.1 创建项目 # 安装脚手架 npm install -g vue-cli # 安装脚手架样板项目 vue init simulatedgreg/electron-vue elec-demo01 1.2 Webpack ReferenceError:process is not defined 错误处理 在执行 npm install 命令时，可能会报错，需要修改 webpack 配置文件 错误内容： ERROR in Template execution fa.
【Electron-Vue】搭建Electron-Vue前端桌面应用
aDiaoYa_的博客
04-22 4712
最近准备写一个前端桌面应用，了解到了一个新的框架——Electron，它是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。接下来，我们就来搭建一个基于vue的electron应用吧。
Electron + vue构建跨平台应用--环境搭建及项目创建
qq_22855157的博客
03-20 288
VScode + Electron + vue构建跨平台应用 引用文本 知识点补充 VScode ：一个前端开发工具； Electron：使用HTML，CSS和JavaScript来构建跨平台桌面应用程序； Vue ：一套构建用户界面的渐进式javascript框架； 功能快捷键 撤销：Ctrl/Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Command...
Electron+Vue开发环境的搭建教程
tonysh_zds的博客
03-30 1460
https://blog.youkuaiyun.com/nodeman/article/details/110522520 主目录下加main.js /* jshint esversion: 6 */ const electron = require('electron'); //const protocol = electron.protocol // Module to control application life. const app = electron.app; // Module to
【electron + vue2】构建桌面端、打包。
2301_76692187的博客
10-29 6368
Electron 是一个使用 JavaScript, HTML 和 CSS 构建跨平台桌面应用程序的开源库。能够运行在 Windows、macOS 和 Linux 上。集成现代Web API：可以访问现代 Web API，如地理位置、通知等。复杂界面设计：利用 HTML 和 CSS 的强大功能，可以创建复杂的用户界面。插件和扩展：可以集成第三方插件和扩展，增强应用功能。像流行的【微软开发的免费、开源的代码编辑器。微软的团队协作平台。Notion】一个组织笔记、任务和项目的协作工具。
【桌面应用程序】Vue-Electron 环境构建、打包与测试（Windows）
一zhi小白的博客
11-16 1991
Vue2 Electron 环境搭建、打包测试。
搭建Electron+vue环境
nishiweiyj的博客
06-20 115
1. 升级vue-cli到3.0以上版本 2.vue create demo 3. cd demo 4.vue add electron-builder
electron-ts-vue: 用Vue和TypeScript打造Electron应用
资源摘要信息:"electron-ts-...总结来说，electron-ts-vue项目提供了一个强大的起点，用于创建现代化、跨平台的桌面应用，同时它整合了前端开发中最热门的技术栈之一，从而为开发人员提供了一个高效且强大的开发环境。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值