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

超详细!!!electron-vite-vue开发桌面应用之引入UI组件库element-plus(四)

云风网
云风笔记
云风知识库

一、安装element-plus以及图标库依赖

npm install element-plus --save
npm install @element-plus/icons-vue
npm i -D unplugin-icons

二、vite按需引入插件

npm install -D unplugin-vue-components unplugin-auto-import

unplugin-vue-components是一个用于Vue.js的插件,它允许你导入Vue组件,而不需要在你的代码中显式地导入它们。这个插件可以让你按需导入组件,从而减少初始加载大小。

unplugin-auto-import是一个用于Vue.js的插件,它可以自动导入Vue.js的相关API,如Vue自身,Vue的RFC(响应式),Composition API,以及其他一些常用的Vue功能。

三、vite.config.ts文件配置引用element-plus

import { defineConfig } from 'vite'
import path from 'node:path'
import electron from 'vite-plugin-electron/simple'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'//自动导入相关api
import Components from 'unplugin-vue-components/vite'//按需导入组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
// https://vitejs.dev/config/
export default defineConfig({plugins: [AutoImport({resolvers: [// 自动导入elementPlus组件ElementPlusResolver(),// 自动导入图标组件 IconsResolver({prefix: 'Icon',})],dts: path.resolve(__dirname, 'types/auto-imports.d.ts')}),Components({resolvers: [ElementPlusResolver(),// 自动注册图标组件IconsResolver({enabledCollections: ['ep'],})],dts: path.resolve(__dirname, 'types/components.d.ts')}),//图标的导入配置Icons({autoInstall: true,}),vue(),electron({main: {// Shortcut of `build.lib.entry`.entry: 'electron/main.ts',onstart(args) {args.reload()// args.startup()}},preload: {// Shortcut of `build.rollupOptions.input`.// Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.input: path.join(__dirname, 'electron/preload.ts'),},// Ployfill the Electron and Node.js API for Renderer process.// If you want use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.// See 👉 https://github.com/electron-vite/vite-plugin-electron-rendererrenderer: process.env.NODE_ENV === 'test'// https://github.com/electron-vite/vite-plugin-electron-renderer/issues/78#issuecomment-2053600808? undefined: {},}),],
})

四、element-plus应用到页面

 <el-button type="success" @click="count++">count is {{ count }}</el-button><el-icon><IEpPlus/></el-icon><i-ep-delete />

页面渲染效果如下

在这里插入图片描述

注意事项

Iconify 图标结构由三部分组成:{prefix}-{collection}-{icon}
prefix:icon的前缀,默认值为’i’,可设置成false,如果设置成false,那么组件使用就变成
collection: 默认是iconify
icon: 图标集中对应的图标名字
collection对应的是 enabledCollections配置,默认是iconify上的所有图标。这里设置的是[‘ep’],表示的是Iconify 中的 element-plus 的图标,也可以设置mdi、ant-design,它会自动根据名称在package.json下载安装对应的图标集
Icons()表示会自动安装@iconify-json/ep的依赖,设置为true,他就会自动安装iconify 图标。

四、补充说明插件unplugin-vue-components和unplugin-auto-import

1、安装依赖运行后,根目录自动生成两个ts声明文件
components.d.ts
/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}/* prettier-ignore */
declare module 'vue' {export interface GlobalComponents {ElButton: typeof import('element-plus/es')['ElButton']HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']}
}
auto-imports.d.ts
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {}

这里直接注释app.vue中组件的引入代码

<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
</script>

再次运行项目,组件正常显示,因为已经插件自动引入,无需手动页面路径引用

在这里插入图片描述

2、对于d.ts文件进行模块化管理

在这里插入图片描述

vite.config.ts文件进行自动导入路径配置

在这里插入图片描述
再次运行项目,组件正常显示

相关文章:

超详细!!!electron-vite-vue开发桌面应用之引入UI组件库element-plus(四)

云风网 云风笔记 云风知识库 一、安装element-plus以及图标库依赖 npm install element-plus --save npm install element-plus/icons-vue npm i -D unplugin-icons二、vite按需引入插件 npm install -D unplugin-vue-components unplugin-auto-importunplugin-vue-componen…...

【排序篇】实现快速排序的三种方法

&#x1f308;个人主页&#xff1a;Yui_ &#x1f308;Linux专栏&#xff1a;Linux &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;数据结构专栏&#xff1a;数据结构 文章目录 1 交换排序1.1 冒泡排序1.2 快速排序1.2.1 hoare版本1.2.2 挖坑法1.2.3 前后指针…...

Java 标识符(详解)

文章目录 一、简介二、命名规则三、命名规范 一、简介 在 Java 中&#xff0c;用于给变量、类、方法等命名的符号组合&#xff0c;我们称之为Java标识符&#xff0c;它就像是给这些编程元素贴上的独特标签&#xff0c;以便在程序中能够准确地引用和操作它们。 二、命名规则 标…...

2024年,有哪些优质的计算机书籍推荐?

在2024年&#xff0c;计算机领域的新书层出不穷&#xff0c;涵盖了从基础理论到前沿技术的多个方面。以下是今年出版的几本备受关注的计算机新书。 1. AI与机器学习类 1、深度学习详解 1.李宏毅老师亲笔推荐&#xff0c;杨小康、周明、叶杰平、邱锡鹏鼎力推荐! 2.数百万次播…...

Python基础知识点--总结

1. 注释 注释用于提高代码的可读性&#xff0c;在代码中添加说明文字&#xff0c;使代码更容易理解。 单行注释&#xff1a;使用 # 符号开头&#xff0c;注释内容在符号之后的行内。多行注释&#xff1a;使用三引号&#xff08; 或 """&#xff09;包裹注释内…...

高效记录与笔记整理的策略:工具选择、结构设计与复习方法

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

Request重复读的问题

换了新工作都有时间写文章&#xff0c;每天也是加班到很晚&#xff0c;也不是工作内容多&#xff0c;主要是还是效率低&#xff0c;要考虑多干的很心累。 一、关于request重复读的问题&#xff0c;从源码的角度来分析 为什么他不能重复读 跳转 再看源码前可能需要一些基础的…...

Linux学习第60天:Linux驱动开发的一些总结

今天是Linux驱动开发的最后一个章节&#xff0c;题目中标明是60天完成的&#xff0c;其实在实际学习及笔记的整理中不止是60天。中间有过断更&#xff0c;有时断更的时间还是挺长的。这是在整个Linux驱动开发学习中最不满意的地方。 题目为Linux学习&#xff0c;其实这个题目有…...

OPP || 继承和抽象类 || 访问控制

OPP面向对象程序设计 数据抽象&#xff1a;类的接口声明和定义实现分离继承&#xff1a;类构成的&#xff08;树型&#xff09;层次关系动态绑定&#xff1a;忽略相似类型区别&#xff0c;用统一的方式使用 基类派生类&#xff1a; 继承&#xff1a;类名 冒号 访问说明符 …...

蓝牙音视频远程控制协议(AVRCP) command跟response介绍

零.声明 本专栏文章我们会以连载的方式持续更新&#xff0c;本专栏计划更新内容如下&#xff1a; 第一篇:蓝牙综合介绍 &#xff0c;主要介绍蓝牙的一些概念&#xff0c;产生背景&#xff0c;发展轨迹&#xff0c;市面蓝牙介绍&#xff0c;以及蓝牙开发板介绍。 第二篇:Trans…...

MySQL的InnoDB存储引擎中的Buffer Pool机制

目录 Buffer Pool 简介 定义 为什么需要Buffer Pool 图解重点知识 Buffer Pool 的组成 数据页&#xff08;Data Pages&#xff09; 索引页&#xff08;Index Pages&#xff09; 插入缓冲页&#xff08;Insert Buffer Pages&#xff09; undo页&#xff08;Undo Pages&a…...

5. MongoDB 文档插入、更新、删除、查询

1. 插入文档 文档的数据结构和JSON基本一样。所有存储在集合中的数据都是BSON格式。 BSON是一种类似JSON的二进制形式的存储格式&#xff0c;是Binary JSON的简称。常用的插入文档方法包括&#xff1a; db.collection.insertOne()&#xff1a;插入单个文档db.collection.inse…...

⌈ 传知代码 ⌋ DETR[端到端目标检测]

&#x1f49b;前情提要&#x1f49b; 本文是传知代码平台中的相关前沿知识与技术的分享~ 接下来我们即将进入一个全新的空间&#xff0c;对技术有一个全新的视角~ 本文所涉及所有资源均在传知代码平台可获取 以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦&#x…...

Oracle之触发器

简介 触发器在数据库里以独立的对象存储&#xff0c;他与存储过程不同的是&#xff0c;存储过程通过其他程序来启动运行或直接启动运行而触发器是由一个事件来启动运行&#xff0c;即触发器是当某个事件发生时自动式运行。并企&#xff0c;触发器不能接收参数。所以运行触发器…...

从零搭建微前端架构:解耦大型项目的终极方案

随着前端应用的复杂度不断提升,单体前端应用(Monolithic Frontend)的维护和扩展难度也日益增加。微前端(Micro-Frontend)作为一种新兴架构理念,旨在将大型前端项目拆分为多个独立、可独立部署的微应用,从而提升项目的可维护性和灵活性。这篇文章将带你从零开始搭建一个微…...

24/8/17算法笔记 MPC算法

MPC算法&#xff0c;在行动前推演一下 MPC&#xff08;Model Predictive Control&#xff0c;模型预测控制&#xff09;是一种先进的控制策略&#xff0c;它利用未来预测模型来优化当前的控制动作。MPC的核心思想是&#xff0c;在每一个控制步骤中&#xff0c;都基于当前系统状…...

GROUP_CONCAT 用法详解(Mysql)

GROUP_CONCAT GROUP_CONCAT 是 MySQL 中的一个聚合函数&#xff0c;用于将分组后的多行数据连接成一个单一的字符串。 通常用于将某个列的多个值合并到一个字符串中&#xff0c;以便更方便地显示或处理数据。 GROUP_CONCAT([DISTINCT] column_name[ORDER BY column_name [ASC…...

Golang httputil 包深度解析:HTTP请求与响应的操控艺术

标题&#xff1a;Golang httputil 包深度解析&#xff1a;HTTP请求与响应的操控艺术 引言 在Go语言的丰富标准库中&#xff0c;net/http/httputil包是一个强大的工具集&#xff0c;它提供了操作HTTP请求和响应的高级功能。从创建自定义的HTTP代理到调试HTTP流量&#xff0c;h…...

SQLALchemy 分页

SQLALchemy 分页 1. 使用SQLAlchemy的`slice`和`offset`/`limit`SQLAlchemy 1.4及更新版本SQLAlchemy 1.3及更早版本使用第三方库注意事项在Web开发中,分页是处理大量数据时一个非常重要的功能。SQLAlchemy是一个流行的Python SQL工具包和对象关系映射(ORM)库,它允许开发者…...

快速上手体验MyPerf4J监控springboot应用(docker版快速开始-本地版)

使用MyPerf4J监控springboot应用 快速启动influxdb时序数据库日志收集器telegrafgrafana可视化界面安装最终效果 项目地址 项目简介: 一个针对高并发、低延迟应用设计的高性能 Java 性能监控和统计工具。 价值 快速定位性能瓶颈快速定位故障原因 快速启动 监控本地应用 idea配…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

数据结构:递归的种类(Types of Recursion)

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...