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

最新推荐文章于 2024-08-08 07:38:22 发布
最新推荐文章于 2024-08-08 07:38:22 发布
阅读量472 收藏
点赞数
分类专栏： electron-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/g_soledad/article/details/105049124
版权

基础环境

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

在这里插入图片描述

varz
关注
专栏目录
electron-vue 入门
qq_36248539的博客
05-27 2105
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 2356
要打包和发布electron-vue应用，你需要先在package.json文件中配置一些信息，例如应用名称，版本，描述，作者，许可证等。要使用electron-vue，你需要先安装Node.js和npm，然后全局安装vue-cli，这是一个用于创建vue项目的命令行工具。这个命令会让你输入一些项目信息，例如项目名称，描述，作者等，然后会自动下载electron-vue模板并安装依赖。这个命令会使用electron-builder来打包应用，并根据你的操作系统生成相应的安装文件。
Electron-Vue环境搭建
Mu_Soul的博客
05-09 271
安装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
项目实战：从零使用vue+electron打造一个完整的俄罗斯方块（纯前端，H5+exe）
m0_73459939的博客
07-29 1486
纯前端从零使用vue+electron完整写出一个俄罗斯方块并打包为exe（可同时H5和exe）
Electron实战之环境搭建
xiangzhihong8的专栏
02-22 2417
工欲善其事必先利其器，在进行实战开发的时候，我们最终的步骤是搞好一个舒服的开发环境，目前支持 Vue 的 Electron 工程化工具主要有 electron-vue、Vue CLI Plugin Electron Builder、electron-vite。接下来我们将分别介绍基于 Vue CLI Plugin Electron Builder 和 electron-vite 的开发环境搭建。
electron-vue
web_q的博客
08-28 1016
又在死亡的边缘试探 要写一个桌面应用 (ps电脑重做系统 node模块出现了问题 安装的时候选择自动把npm到全局变量里) 文档electron-vue     https://simulatedgreg.gitbooks.io/electron-vue/content/cn/ 官网 https://electronjs.org/ 一  先构建一个初始项目 $ vue init simul...
Electron-vue
Growing up Or Growing old
01-15 9965
Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。通过将Chromium和Node.js嵌入到其二进制文件中，Electron 允许您维护一个 JavaScript 代码库并创建可在 Windows、macOS 和 Linux 上运行的跨平台应用程序——无需原生开发经验。......
electron-vue项目从搭建、运行到打包（以及electron-vue的bug修改）
欢迎来到iceseasyh的博客
12-12 4527
electron-vue 的项目搭建、运行到打包
第十一章：Electron-Vue创建项目
2401_84434954的博客
04-27 966
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】})开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-hlEdgwfB-1714199063501)]
electron-vue利用webpack打包实现多页面的入口文件问题
10-17
`electron-vue` 是一个预配置的 `Vue.js` 和 `Electron` 开发环境，它整合了 `vue-cli` 和 `webpack` 配置，使得在 Electron 中使用 Vue.js 更加方便。 **1. Webpack 的核心概念** 在深入讨论多页面配置之前，我们...
electron-vue:electron简易开发桌面应用
05-25
Electron-Vue 是一个基于 Vue.js 和 Electron 的桌面应用程序开发框架，它结合了 Vue.js 的易用性和 Electron 的强大功能，使得开发者能够轻松构建跨平台的桌面应用。这个框架允许你利用前端开发的技术栈来开发桌面...
使用 electron-vue 构建你的桌面应用
weixin_33671935的博客
10-31 1769
什么是 electron 官网里这么说：Electron提供了一个Nodejs的运行时，专注于构建桌面应用，同时使用web页面来作为应用的GUI，你可以将其看作是一个由JavaScript控制的迷你版的Chromium浏览器。 翻译一下：它是一个运行时，可以像 node 一样这样执行：electron app.js；也是一个使用 html...
Electron+Vue开发环境的搭建教程
tonysh_zds的博客
03-30 1364
https://blog.csdn.net/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-vue使用
Mo_zifeng的博客
08-20 231
1、初始化项目 vue init simulatedgreg/electron-vue ele-vue-first 可能遇到的问题： 解决方案： 根据提示安装@vue/cli-init，但是我用yarn安装后发现还是不行，再用cnpm安装，就ok了 cnpm i -g @vue/cli-init 安装完重新运行初始化命令 2、安装依赖，启动项目 cnpm i cnpm run dev 可能遇到的问题： 解决方案： 找到根目录下的**.electron-vue** 分别在 webpack.ren
Electron-Vue 项目教程
最新发布
gitblog_00368的博客
08-08 753
Electron-Vue 项目教程 electron-vueSimulatedGREG/electron-vue：这是一个基于Electron和Vue.js的桌面应用开发框架，适合开发跨平台的桌面应用程序。特点包括一套代码、多端运行、易于上手等。项目地址:https://gitcode.com/gh_mirrors/el/electron-vue 1. 项目的目录结构及介绍 Electron-V...
【Electron+Vue】【一】开发跨平台桌面应用了解+构建
BMG-Princess
02-08 5911
目录 基础综合介绍： 环境搭建： 安装Electron Electron应用程序分成三个基础模块：主进程、进程间通信和渲染进程。 【主进程】 【渲染进程】 【主进程与渲染进程通信】 src目录结构 main目录 渲染进程 qq音乐播放器 网易云音乐 其他基于 ELECTRON-VUE 的作品 基础综合介绍： 虽然B/S是目前开发的主流，但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法满足某些场景下的使用需求，而桌面应用可以读写本地文件、调用更多系统资源，..
Electron Vue 项目搭建
02-23 681
查看 node 版本： node -v C:\Users\xuxiaowei>node -v v12.16.0 C:\Users\xuxiaowei> 设置组件路径与缓存路径： npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Progra...
VUE-ELECTRON
XLX2339635744的博客
09-06 1117
Vue-Electron整合打包以及解决打包出错,无法访问接口等问题 #创建Vue项目 vue create myproject cd myproject #添加electron依赖 vue add electron-builder #启动服务 yarn electron:serve #打包服务 yarn electron:build 无法访问接口问题解决 #vue.config.js修改proxy proxy: { '/eba': { target: 'http://192.
Electron-vue改造Vue项目：从传统Web到桌面应用的实践指南
这意味着，使用Electron-vue，开发者可以快速启动一个包含Vue组件、路由和 Electron特性的应用，而无需从头开始搭建环境。 改造Vue项目的过程包括以下步骤： 1. 更换初始化脚手架：传统的Vue CLI脚手架被Electron-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值