当前位置： 首页 > news >正文

【Electron】总结：如何创建Electron+Element Plus的项目

news 2025/11/5 5:03:03

我将结合官网手册与AI问到的信息，直接给出步骤，与命令。

一、准备环境

首先在C盘Users，你的登录的账号名文件夹下，编辑.npmrc文件。添加镜像地址。

如果使用了yarn，则是.yarnrc。可以全部都配置。

npm install -g yarn
registry=https://registry.npmmirror.com
ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
npm config set registry https://registry.npm.taobao.org

二、创建Element项目

  并使用Electron Forge的 Vite template.

npm init electron-app@latest my-vue-app -- --template=vite

三、添加依赖

npm install vue
npm install --save-dev @vitejs/plugin-vue

四、配置页面

根目录/index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Hello World!</title></head><body><div id="app"></div><script type="module" src="/src/renderer.js"></script></body>
</html>

 src/App.vue

<template><h1>💖 Hello World!</h1><p>Welcome to your Electron application.</p>
</template><script setup>
console.log('👋 This message is being logged by "App.vue", included via Vite');
</script>

 src/renderer.js

import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');

根目录/ vite.renderer.config.mjs

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';// https://vitejs.dev/config
export default defineConfig({plugins: [vue()]
});

至此我们创建了基于Vue3的Electron项目。

2-4步骤，参考自官网How to create an Electron app with Vue and Electron Forge

五、安装Element-plus

npm install element-plus

六、配置页面

src/renderer.js

// src/renderer.js
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

src/App.vue 

<!-- src/App.vue -->
<template><div id="app"><h1>Hello, Electron Forge with Vue 3 and Element Plus!</h1><el-button type="primary">Primary Button</el-button></div>
</template><script>
export default {name: 'App'
};
</script>

致此完成。启动

七、增加支持TypeScript

 1、安装 TypeScript：

npm install -g typescript

2、配置 tsconfig.json 文件：

在项目根目录下创建 tsconfig.json 文件，这个文件用于配置 TypeScript 编译器选项。你可以通过命令行工具自动生成一个基本配置文件：

tsc --init

3、安装 Electron 类型定义：

为了获得更好的开发体验，包括类型检查和自动完成功能，你应该安装 Electron 的类型定义文件。运行以下命令来安装： 

npm install @types/electron --save-dev

相关文章：

【Electron】总结：如何创建Electron+Element Plus的项目

我将结合官网手册与AI问到的信息&#xff0c;直接给出步骤&#xff0c;与命令。 一、准备环境 首先在C盘Users&#xff0c;你的登录的账号名文件夹下&#xff0c;编辑.npmrc文件。添加镜像地址。 如果使用了yarn&#xff0c;则是.yarnrc。可以全部都配置。 npm install -g …...

编程日记 2024/11/16 8:48:43

从依托指标字典到 NoETL 自动化指标平台，指标口径一致性管理的进阶

今天&#xff0c;我们一起来梳理和盘点下不同代际指标平台如何实现指标口径一致性管理&#xff1a; 第一代&#xff1a;指标口径登记与管理 第一代指标平台聚焦于指标口径的登记与管理&#xff0c;依托指标字典实现企业指标口径的有效检索与管理功能。 此阶段&#xff0c;业…...

编程日记 2024/11/16 8:46:33

嵌入式面试题练习 - 2024/11/15

欢迎找我进行职业规划&#xff0c;超值的自我投资 -> 嵌入式软件工程师一对一指导 1.设有定义char *p[]{"Shanghai","Beijing","Honkong"};则结果为j字符的表达式是&#xff08;&#xff09; A *p[1] 3 B *(p[1] 3) C *(p[3] 1) D p[3] […...

编程日记 2024/11/16 8:44:28

分析http话术异常挂断原因

用户反馈在与机器人通话时&#xff0c;自己明明有说话&#xff0c;但是通话还是被挂断了&#xff0c;想知道原因。 分析日志 我们根据用户提供的freeswitch日志分析&#xff1a;发现是因为超时导致话术执行hangup动作&#xff0c;结束了通话。 从这一行向上分析日志&#xff…...

编程日记 2024/11/16 8:43:27

云岚到家 秒杀抢购

目录 秒杀抢购业务特点 常用技术方案 抢券 抢券界面 进行抢券 我的优惠券列表 活动查询 系统设计 活动查询分析 活动查询界面显示了哪些数据&#xff1f; 面向高并发如何提高活动查询性能&#xff1f; 如何保证缓存一致性&#xff1f; 数据流 Redis数据结构设计 如…...

编程日记 2024/11/16 8:40:24

【WPF】Prism库学习（一）

Prism介绍 1. Prism框架概述&#xff1a; Prism是一个用于构建松耦合、可维护和可测试的XAML应用程序的框架。它支持WPF、.NET MAUI、Uno Platform和Xamarin Forms等多个平台。对于每个平台&#xff0c;Prism都有单独的发布版本&#xff0c;并且它们在不同的时间线上独立开发。…...

编程日记 2024/11/16 8:39:22

0 -vscode搭建python环境教程参考（windows)

引用一篇非常详细的vscode搭建python环境教程 链接&#xff1a;vscode安装以及配置Python基本环境 以下是VSCode和PyCharm的对比 个人更建议使用VSCode Visual Studio Code (VSCode) Visual Studio Code 是由微软开发的一款免费、开源的轻量级代码编辑器。它支持多种编程语…...

编程日记 2024/11/16 8:34:17

Uniapp 引入 Android aar 包 和 Android 离线打包

需求&#xff1a; 原生安卓 apk 要求嵌入到 uniapp 中&#xff0c;并通过 uniapp 前端调起 app 的相关组件。 下面手把手教你&#xff0c;从 apk 到 aar&#xff0c;以及打包冲突到如何运行&#xff0c;期间我所遇到的问题都会 一 一 进行说明&#xff0c;相关版本以我文章内为…...

编程日记 2024/11/16 8:31:13

10款高效音频剪辑工具，让声音编辑更上一层楼。

音频剪辑在音频&#xff0c;视频&#xff0c;广告制作&#xff0c;游戏开发&#xff0c;广播等领域中都有广泛的应用。通过音频剪辑&#xff0c;创作者可以通将不同的音频片段进行剪切、拼接、混音等操作&#xff0c;创作出风格各异的音乐作品。如果你也正在为音频创作而努力的…...

编程日记 2024/11/16 8:30:12

Javascript——设计模式（一）

Javascript常见设计模式-CSDN博客 设计模式专栏内容总结-CSDN博客 C#编程思想——设计模式-CSDN博客 设计模式概述及其作用 设计模式&#xff08;Design Pattern&#xff09;是一套被反复使用、多数人知晓的、经过分类编目的代码设计经验的总结。使用设计模式的主要目的是为…...

编程日记 2024/11/16 8:25:08

Hybird和WebView

在移动端Hybrid开发模式下&#xff0c;iOS和Android应用都可以通过一种共享代码的方式&#xff0c;利用Web技术&#xff08;HTML、CSS、JavaScript&#xff09;和原生应用的功能进行开发。这种方式的主要优点是减少了开发成本&#xff0c;因为大部分代码可以共享&#xff0c;同…...

编程日记 2024/11/16 8:24:07

c++实现中缀表达式 转换为后缀表达式

使用栈来计算后缀表达式的值&#xff1a; 9(3 - 1)*310/2; 后缀表达式&#xff1a;所有的符号都是在运算数字的后面出现&#xff1a; 9 3 1 – 3 * 10 2 / 规则: 中缀表达式转后缀表达式: 1.从左到右遍历中缀表达式的每个数字和符号&#xff0c;若是数字就打印同时入栈数…...

编程日记 2024/11/16 8:20:03

Cisco FMC重置SmartLicense到Evaluatin mode步骤

1 科普&#xff1a; what is FMC full name is Firepower Management Center, 是思科FirePower防火墙的统一管理平台. 能管理ASA不&#xff1f; no&#xff0c;只能管理FTD模式的墙。这里的FTD包括物理机firepower系列运行的FTD&#xff0c;以及FTDv&#xff08;虚拟化版本&a…...

编程日记 2024/11/16 8:15:59

多表查询综合归纳

目录 1. 多表关系 1.1 一对多&#xff08;多对一&#xff09; 1.2 多对多 1.3 一对一 2. 多表查询概述 2.1 熟悉表 2.2 笛卡尔积 2.3 消除笛卡尔积 2.4 多表查询分类 3. 内连接 3.1 隐式内连接 3.2 显式内连接 4. 外连接 4.1 左外连接 4.2 右外连接 5. 自连接 …...

编程日记 2024/11/16 8:14:58

【5.线性表-链式表示-王道课后算法题】

王道数据结构-第二章-链式表示算法题 1.在带头结点的单链表L中&#xff0c;删除所有值为x的结点&#xff0c;并释放其空间&#xff0c;假设值为x的结点不唯一&#xff0c;试编写算法以实现上述操作。2. 试编写在带头结点的单链表L中删除一个最小值结点的高效算法(假设该结点唯一…...

编程日记 2024/11/16 8:11:55

存储过程及练习

1.存储过程 &#x1f4d6;什么是存储过程&#xff1f; 存储过程和函数是事先经过编译并存储在数据库中的一段sql语句集合&#xff0c;调用存储过程函数可以简 化应用开发人员的很多工作&#xff0c;减少数据在数据库和应用服务器之间的传输&#xff0c;对于提高数据处理的 效率…...

编程日记 2024/11/16 8:10:54

【在Linux世界中追寻伟大的One Piece】多路转接epoll

目录 1 -> I/O多路转接之poll 1.1 -> poll函数接口 1.2 -> poll的优点 1.3 -> poll的缺点 1.4 -> poll示例 1.4.1 -> 使用poll监控标准输入 2 -> I/O多路转接之epoll 2.1 -> 初识epoll 2.2 -> epoll的相关系统调用 2.2.1 -> epoll_cre…...

编程日记 2024/11/16 8:08:50

设计模式-参考的雷丰阳老师直播课

一般开发中使用的模式为模版模式策略模式组合&#xff0c;模版用来定义骨架&#xff0c;策略用来实现细节。 模版模式 策略模式 与模版模式特别像&#xff0c;模版模式会定义好步骤定义好框架&#xff0c;策略模式定义小细节 入口类 使用模版模式策略模式开发支付 以上使用…...

编程日记 2024/11/16 8:04:44

Python +Pyqt5 简单视频爬取学习（一）

文章目录 前言 一、演示 二、查找网页视频流的索引文件 三、分析视频流的url和视频流索引文件的差异性 四、判断视频数据是否需要转化为ts 五、判断视频是否被加密&#xff0c;如若被加密&#xff0c;需要先解密 六、合并所有的ts视频&#xff0c;以MP4模式输出完整视频 总结 前…...

编程日记 2024/11/16 8:02:42

Python Requests模块全面教程

Python Requests模块全面教程 在现代软件开发中&#xff0c;网络请求是一个不可或缺的部分。无论是获取网页数据、调用API接口&#xff0c;还是进行数据交互&#xff0c;都会涉及到HTTP请求。Python的Requests模块是一个非常强大的库&#xff0c;能够让我们轻松地发送HTTP请求…...

编程日记 2024/11/16 7:59:38

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/11/1 7:16:32

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/11/3 4:47:37

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/10/21 23:40:01

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/10/28 21:22:01

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/10/28 23:13:01

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2025/11/3 21:36:57

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2025/10/26 9:24:28

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

编程新知 2025/10/2 7:24:40

拟合问题处理

在机器学习中&#xff0c;核心任务通常围绕模型训练和性能提升展开&#xff0c;但你提到的 “优化训练数据解决过拟合” 和 “提升泛化性能解决欠拟合” 需要结合更准确的概念进行梳理。以下是对机器学习核心任务的系统复习和修正&#xff1a; 一、机器学习的核心任务框架 机…...

编程新知 2025/9/6 11:47:54