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

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

news 2025/7/10 8:19:24

我将结合官网手册与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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/6/17 12:57:30

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/7/9 5:50:30

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/7/7 14:56:19

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/6/20 12:22:50

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/7/8 22:13:37

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/7/8 20:09:11

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/7/10 3:12:51

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/7/6 23:48:10

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/7/8 15:28:22

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/7/9 18:40:03