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

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

news 2026/2/9 6:27:41

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

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

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

编程新知 2025/10/27 21:25:04

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2026/1/26 13:21:10

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2026/1/27 19:28:11

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2026/1/28 11:35:09

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2026/2/3 13:01:10

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...

编程新知 2026/2/7 0:13:47

篇章二 论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...

编程新知 2026/2/5 5:58:30