使用electron-vite +Vue+ElementPlus开发跨平台桌面应用

news/2024/7/10 0:48:36 标签: electron, vite, vue, ElementPlus, elasticsearch

前言:

我们的项目是基于Elasticsearch来进行数据的存储与查询的,使用过ES的朋友应该都比较清楚,现在还没有一个比较友好的ES的桌面客户端软件可以和MySQL的桌面客户端软件媲美的,使用ES起来非常麻烦,经常会被吐槽的三个点:

  1. 资深测试吐槽:为什么技术选型要选择ES,增删改查个数据麻烦的一塌糊涂,严重影响我的测试效率!

  1. 研发小白吐槽:新建索引的时候,字段的类型设置咋这么麻烦呢,脚本要写一大坨!

  1. 研发交接吐槽:这么多索引字段,每个字段代表什么意思啊?没有相关的说明文档吗?

一个有理想的程序员:

没有工具那么我们就自己写一个呗,对于程序员来说,写个小工具还不是一件想到就能做到的事情吗?说干就干,没过多久工具就出现在大家的面前了,它比kibana、ES-header方便好用都好用,同事们也都觉得的挺赞,部分界面如下图:

工具的详情请参考,也想让你帮忙试用一下,提提建议,

下载链接:https://github.com/duzhimin/fast-es/releases/download/v1.0/FastES_v1.0_Setup.exe

功能介绍:https://github.com/duzhimin/fast-es/blob/main/docs/instructions.md

问题来了:

点赞之后,随之而来的是吐槽,吐槽的有两点:

  1. 界面丑陋不堪:基于java swing开发,天生的丑

  1. 没法跨平台使用:只能在Windows下使用

咋整?

兵来将挡,水来土掩:

寻找一个跨平台且宜美化的技术栈来开发这个客户端

一、技术选型

经过一番技术调研,最终我们选择了electron-vite,原因如下:

  1. electron

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。通过将 Chromium 和 Node.js 合并到同一个运行时环境中,构建出兼容 Mac、Windows 和Linux三个平台的应用程序。通过使用electron就能实现跨平台+宜美化

  • 优点:

开发方便,技术栈适合前端同学(UI使用Web技术,系统API交互部分使用NodeJS)

  • 缺点:

1)、打包体积大,需要打包Chromium和NodeJS的运行时环境

2)、内存消耗大:Chromium本身比较吃内存,同时NodeJS是JIT运行的,相比较C++等AOT的语言来说内存消耗也更大。

  1. vite:

Vite是一种新型前端构建工具,能够显著提升前端开发体验。

  1. electron-vite

electron-vite 是一个新型 Electron 开发构建工具,旨在为 Electron 提供更快、更精简的开发体验。

  1. Vue+ElementPlus

这两个就不用多说了,非常成熟的前端开发框架,拿过来之间用

环境搭建:

1、安装nodejs

https://nodejs.org/en/ v18.14.1

2、检查 Node.js 是否正确安装,请在您的终端输入以下命令:

node -v

npm -v

3、首先创建一个文件夹并初始化 npm 包

mkdir my-electron-app && cd my-electron-app

npm init

4、将 electron 包安装到应用的开发依赖中

npm install --save-dev electron

在您的 package.json配置文件中的scripts字段下增加一条start命令:

{
"scripts": {
"start": "electron ."
}
}

6、start命令能让您在开发模式下打开您的应用:npm start

7、安装vscode

前端开发工具

8、安装element-plus

npm install element-plus --save

快速开始

  1. npm create @quick-start/electron

根据提示一步一步的输入项目相关的名称即可

  1. 执行npm start即可看到相关的界面

备注(可能会因为网络原因导致npm下载相关的包出错,重试即可)

效果


http://www.niftyadmin.cn/n/105107.html

相关文章

pytorch入门3--线性回归以及许多python,pytorch函数的用法

先补充一些知识点,这里不一定用得到,后面的学习过程中可能用得到。 1.batch表示批量,就是一批数据集的意思; 2.batch_size表示数据集(样本集、训练集)的大小(数据的个数)&#xff1b…

【GO】31.grpc 客户端负载均衡源码分析

这篇文章是记录自己查看客户端grpc负载均衡源码的过程,并没有太详细的讲解,参考价值不大,可以直接跳过,主要给自己看的。一.主要接口:Balancer Resolver1.Balancer定义Resolver定义具体位置为1.grpc源码对解析器(resol…

比特数据结构与算法(第四章_中_续②)堆解决Topk问题(最小的k个数)

TopK问题介绍:在N个数中找出最大/小的前K个 (比如在1000个数中找出最大/小的前10个)以前的方法:冒泡排序。时间复杂度: O(N^2)现在找最大的k个数的方法:方法1:堆排序降序,前N个就是最…

高级前端面试题汇总

iframe 有那些优点和缺点? iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 优点: 用来加载速度较慢的内容(如广告)可以使脚本可以并行下载可以实现跨子域通信 缺点: iframe 会…

我的Android前沿技术—— Artifactory私服 搭建

我们说的私服,其实指的是企业局域网内的软件包依赖库。 说到软件库,就会牵扯出另一个概念——包管理器。 包管理器是在电脑中自动安装、配置、卸载和升级软件包的工具组合。包管理器由于其便捷性,被越来越多的新技术所采纳,从老…

漫谈丨集团企业的电子档案怎么管?

今天聊聊集团企业电子档案建设的话题,根据这么多年的项目实践经验,可以从以下4个角度解决。 一般情况下,集团企业档案电子化是由集团本部顶层设计,下属产业集团企业试点执行,数据需要隔离,独立应用。 集团…

2023-2-27 刷题情况

求出最多标记下标 题目描述 给你一个下标从 0 开始的整数数组 nums 。 一开始&#xff0c;所有下标都没有被标记。你可以执行以下操作任意次&#xff1a; 选择两个 互不相同且未标记 的下标 i 和 j &#xff0c;满足 2 * nums[i] < nums[j] &#xff0c;标记下标 i 和 j…

图解鼠标事件的 ScreenX ,LayerX,clientX,PageX,offsetX,X

前言&#xff1a; 完在上一篇文章 &#x1f381;如何实现原生 JS 的拖拽效果我中使用到了 MouseEvent 事件对象身上的 clienX 的属性&#xff0c;但同时我也注意到了事件对象身上关于 X 的相关属性还有很多&#xff0c;并且在移动端开发中&#xff0c;这些属性需要频繁的用到&a…