【桌面应用程序】Vue-Electron 环境构建、打包与测试(Windows)

前言

Vue 与 Electron 环境构建、打包与测试。

目录

前言

一、基本环境准备

二、配置npm源

三、创建Vue项目

四、添加Electron支持

五、应用启动

​六、添加UI框架 ElementUI

​七、打包


一、基本环境准备

  • npm版本:8.6.0
  • node版本:v18.0.0
  • Vue/cli版本:@vue/cli 5.0.8
  • IDE:WebStorm

node环境与Vue环境安装略。

node直接去Node.js — Run JavaScript Everywhere下载即可。

全局安装vue使用以下命令。

npm install -g @vue/cli

二、配置npm源

为避免下载过程中因网络问题导致失败,首先确认npm源。

npm config list# 我的结果
disturl = "https://mirrors.huaweicloud.com/electron-builder-binaries/"
electron_builder_binaries_mirror = "https://mirrors.huaweicloud.com/electron-builder-binaries/"
electron_mirror = "https://mirrors.huaweicloud.com/electron/"
registry = "https://registry.npmmirror.com/"

如何设置

npm config set disturl = "https://mirrors.huaweicloud.com/electron-builder-binaries/"
npm config set electron_builder_binaries_mirror = "https://mirrors.huaweicloud.com/electron-builder-binaries/"
npm config set electron_mirror = "https://mirrors.huaweicloud.com/electron/"
npm config set registry = "https://registry.npmmirror.com/"

以上地址测试与 2024年11月16日。当然也可以用taobao的electron源。

三、创建Vue项目

vue create utils-hub

我这里选择Vue2

 Vue项目创建完成!

四、添加Electron支持

cd utils-hub
vue add electron-builder

五、应用启动

打开 WebStorm,打开项目

编辑运行/配置

配置Vue启动脚本

配置Electron启动脚本

 逐个启动。

 六、添加UI框架 ElementUI

npm install element-ui --save

 全局引用ElementUI

禁用ESlint

 测试ElementUI

七、打包

 安装 electron-builder

npm install --save-dev electron-builder

编辑vue.config.js,添加以下内容

其中,icon需要指定为256x256大小的ico文件。nsis为安装版,portable为便携版。

开始打包

npm run electron:build

双击运行便携版的exe

可以应用页面显示正常,任务栏图标正常,唯独没有只有左上角icon。

添加窗口图标

验证。

其他主机运行。

至此,Vue + Electron环境搭建、打包与测试完成。

结语

折腾了几个小时,中途失败最多的就是下载包下载不了,不是404,就是超时。多尝试几次,基本就可以成功。

环境搭建好了就可以写业务逻辑了。

希望可以帮到你! 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/475437.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

golang中的init函数

程序的初始化和执行都起始于 main 包。如果 main 包还导入了其它的包,那么就会在编译时将它们依次 导入。有时一个包会被多个包同时导入,那么它只会被导入一次(例如很多包可能都会用到 fmt 包,但 它只会被导入一次&#x…

Paint 学习笔记

目录 ippaint 外扩对象 LCM_inpaint_Outpaint_Comfy: 不支持文字引导 ippaint https://github.com/Sanster/IOPaint 外扩对象 https://www.iopaint.com/models/diffusion/powerpaint_v2 GitHub - open-mmlab/PowerPaint: [ECCV 2024] PowerPaint, a versatile …

【C++】深入理解 C++ 中的继承进阶:多继承、菱形继承及其解决方案

个人主页: 起名字真南的CSDN博客 个人专栏: 【数据结构初阶】 📘 基础数据结构【C语言】 💻 C语言编程技巧【C】 🚀 进阶C【OJ题解】 📝 题解精讲 目录 C继承机制详解与代码示例📌1. 继承的基本概念📌 2.…

【MATLAB源码-第218期】基于matlab的北方苍鹰优化算法(NGO)无人机三维路径规划,输出做短路径图和适应度曲线.

操作环境: MATLAB 2022a 1、算法描述 北方苍鹰优化算法(Northern Goshawk Optimization,简称NGO)是一种新兴的智能优化算法,灵感来源于北方苍鹰的捕猎行为。北方苍鹰是一种敏捷且高效的猛禽,广泛分布于北…

C#中的二维数组的应用:探索物理含义与数据结构的奇妙融合

在C#编程中,二维数组(或矩阵)是一种重要的数据结构,它不仅能够高效地存储和组织数据,还能通过其行、列和交叉点(备注:此处相交处通常称为“元素”或“单元格”,代表二维数组中的一个…

利用uniapp开发鸿蒙:运行到鸿蒙模拟器—踩坑合集

从uniapp运行到鸿蒙模拟器上这一步,就有非常多的坑,一些常见的坑,官网都有介绍,就不再拿出来了,这里记录一下官网未记录的大坑 1.运行路径从hbuilderx启动鸿蒙模拟器 解决方法: Windows系统,官…

跨平台WPF框架Avalonia教程 十三

AutoCompleteBox 自动补全输入框 自动补全输入框提供了一个供用户输入的文本框和一个包含可能匹配项的下拉列表。下拉列表会在用户开始输入时显示,并且每输入一个字符,匹配项都会更新。用户可以从下拉列表中选择匹配项。 文本与可能项匹配的方式是可配…

开发中使用UML的流程_02 CIM-1:定义业务流程

CIM-1定义业务流程(业务用例模型)的生成,有下列两项: 1.业务用例图 2.业务用例简述 业务用例图的主要组成元素是业务用例和业务执行者。 图中的一个业务用例代表一条业务流程,业务执行者则代表位于业务组织外但会启动…

Streamlit + AI大模型API实现视频字幕提取

简介 在本文中,我将带你探讨如何使用Streamlit和AI大模型API来实现视频字幕提取的技术。Streamlit是一个开源的Python库,用于快速构建数据应用的Web界面,而AI大模型API,如OpenAI,提供了强大的语言处理能力&#xff0c…

c++--------《set 和 map》

c--------《set 和 map》 1 set系列的使⽤1.1 set类的介绍1.2 set的构造和迭代器1.3 set重要接口 2 实现样例2.1: insert和迭代器遍历使⽤样例:2.2: find和erase使⽤样例: 练习3.map系列的使用3.1 map类的介绍3.1.1 pair类型介绍 3.2 map的数据修改3.3mu…

计算机网络——路由选择算法

路由算法 路由的计算都是以子网为单位计算的——找到从原子网到目标子网的路径 链路状态算法 序号——(源路由器,序号)——如果发现这个序号重复或者老了——就不扩散 先测量——再泛洪获得路由 路由转发情况 若S——>W是21则不更改——…

同三维T80004EHU 高清HDMI/USB编码器

同三维T80004EHU 高清HDMI/USB编码器 1路HDMI或1路USB输入,带1路3.5音频输入,高清1080P60 同三维T80004EHU 高清HDMI/USB编码器 产品简介: 同三维T80004EHU高清HDMI/USB编码器是一款1路HDMI或1路USB高清编码器。可将 HDMI 或USB视频源编码…

RGB与YCbCr转换算法

目录 RGB与YCbCr转换算法RGB与YCbCr色域介绍RGB模型YCbCr色域简介YCbCr的应用YUV 和 YCbCr 的区别 色彩转换公式 RGB 转 YCbCr 实现RGB 转 YCbCr 的 Matlab 实现RGB 转 YCbCr 的 FPGA 实现 YCbCr 转 RGB 实现YCbCr 转 RGB 的 Matlab 实现YCbCr 转 RGB 的 FPGA 实现 RGB与YCbCr转…

子串【Lecode_HOT100】

1.和为K的子数组No.560 前缀和枚举 public int subarraySum(int[] nums, int k) {int count 0;//满足条件的个数//计算前缀和int[] preSum new int[nums.length1];for(int i 1 ; i<preSum.length;i){preSum[i]preSum[i-1]nums[i-1];}//查找满足kfor(int l 0;l<preSum…

13.C++内存管理2(C++ new和delete的使用和原理详解,内存泄漏问题)

⭐本篇重点&#xff1a;new, delete的使用和原理 ⭐本篇代码&#xff1a;c学习/04.c-动态内存管理 橘子真甜/c-learning-of-yzc - 码云 - 开源中国 (gitee.com) 目录 一. new和delete的使用 1.1 操作内置类型 1.2 操作自定义类型 二. new, delete与malloc, free的区别 2.1…

vue中动态渲染静态图片资源

不报错且f12查看元素的时候&#xff0c;显示的src说明已经渲染到html的src上&#xff0c;但是就是不显示在页面上 原因 在vue上&#xff0c;动态渲染静态图片资源&#xff08;比如从assets文件夹加载的图片&#xff09;需要注意打包工具对静态资源的解析方式 由于vue2的脚手…

uniapp 相关的swiper的一些注意事项

先推荐一个一个对标pc端swiper的uniapp版本 zebra-swiper 缺点是自定义分页器不是很好处理 不知道怎么弄 优点:可以进行高度自适应 &#xff08;这个uniapp原生swiper没有 只能动态修改 采用js 或者只有几种固定高度时采用变量修改&#xff09; <swiperref"lifeMiddle…

豆瓣书摘 | 爬虫 | Python

获取豆瓣书摘&#xff0c;存入MongoDB中。 import logging import timeimport requests from bs4 import BeautifulSoup from pymongo import MongoClientheaders {accept: text/html,application/xhtmlxml,application/xml;q0.9,image/avif,image/webp,image/apng,*/*;q0.8,…

(Linux)搭建静态网站——基于http/https协议的静态网站

简单了解nginx配置文件 1.下载并开启nginx服务 下载 [rootlocalhost ~]# dnf install nginx -y开启 [rootlocalhost ~]# systemctl restart nginx 1.(1)搭建静态网站——基于http协议的静态网站 实验1&#xff1a;搭建一个web服务器&#xff0c;访问该服务器时显示“hello w…

含有非期望产出的EBM模型及其改进模型

含有非期望产出的EBM模型及其改进模型 今天推出的是含有非期望产出的EBM模型及其两种改进模型。 **参考文献&#xff1a;《基于数字经济要素组合的绿色全要素生产率提升研究中的模型》**杜娟&#xff0c;张子承&#xff0c;王熠 本文构建了考虑非期望产出的改进EBM&#xff…