超详细!!!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…...

【排序篇】实现快速排序的三种方法
🌈个人主页:Yui_ 🌈Linux专栏:Linux 🌈C语言笔记专栏:C语言笔记 🌈数据结构专栏:数据结构 文章目录 1 交换排序1.1 冒泡排序1.2 快速排序1.2.1 hoare版本1.2.2 挖坑法1.2.3 前后指针…...

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

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

Python基础知识点--总结
1. 注释 注释用于提高代码的可读性,在代码中添加说明文字,使代码更容易理解。 单行注释:使用 # 符号开头,注释内容在符号之后的行内。多行注释:使用三引号( 或 """)包裹注释内…...

高效记录与笔记整理的策略:工具选择、结构设计与复习方法
✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…...

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

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

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

蓝牙音视频远程控制协议(AVRCP) command跟response介绍
零.声明 本专栏文章我们会以连载的方式持续更新,本专栏计划更新内容如下: 第一篇:蓝牙综合介绍 ,主要介绍蓝牙的一些概念,产生背景,发展轨迹,市面蓝牙介绍,以及蓝牙开发板介绍。 第二篇:Trans…...

MySQL的InnoDB存储引擎中的Buffer Pool机制
目录 Buffer Pool 简介 定义 为什么需要Buffer Pool 图解重点知识 Buffer Pool 的组成 数据页(Data Pages) 索引页(Index Pages) 插入缓冲页(Insert Buffer Pages) undo页(Undo Pages&a…...

5. MongoDB 文档插入、更新、删除、查询
1. 插入文档 文档的数据结构和JSON基本一样。所有存储在集合中的数据都是BSON格式。 BSON是一种类似JSON的二进制形式的存储格式,是Binary JSON的简称。常用的插入文档方法包括: db.collection.insertOne():插入单个文档db.collection.inse…...

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

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

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

24/8/17算法笔记 MPC算法
MPC算法,在行动前推演一下 MPC(Model Predictive Control,模型预测控制)是一种先进的控制策略,它利用未来预测模型来优化当前的控制动作。MPC的核心思想是,在每一个控制步骤中,都基于当前系统状…...

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

Golang httputil 包深度解析:HTTP请求与响应的操控艺术
标题:Golang httputil 包深度解析:HTTP请求与响应的操控艺术 引言 在Go语言的丰富标准库中,net/http/httputil包是一个强大的工具集,它提供了操作HTTP请求和响应的高级功能。从创建自定义的HTTP代理到调试HTTP流量,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配…...

C语言 之 strlen、strcpy、strcat、strcmp字符串函数的使用和模拟实现
文章目录 strlen的使用和模拟实现函数的原型strlen模拟实现:方法1方法2方法3 strcpy的使用和模拟实现函数的原型strcpy的模拟实现: strcat的使用和模拟实现函数的原型strcat的模拟实现: strcmp的使用和模拟实现函数的原型strcmp的模拟实现 本…...

CAPL使用结构体的方式组装一条DoIP车辆识别请求报文(payload type 0x0002)
DoIP车辆识别请求(payload type 0x0002)报文的格式为: /******************************************************** +--------+--------+--------+--------+ |version | inVer | type | +--------+--------+--------+--------+ | length …...

数据接入教学
数据接入教学 1、开通外部网络策略2、检查本地防火墙策略3、测试网络连通性4、工具抓包命令5、本地测试发送与监听 1、开通外部网络策略 保证外部网络联通、保证内部防火墙开通策略(可以关闭进行测试) 2、检查本地防火墙策略 关闭进行测试 停止firewa…...

炒作将引发人工智能寒冬
我们似乎经常看到人工智能的进步被吹捧为机器真正变得智能的一大飞跃。我将在这里挑选其中的一个例子,并确切解释为什么这种态度会为人工智能的未来埋下隐患。 这很酷,这是一个非常困难且非常具体的问题,这个团队花了3 年时间才解决。他们一定…...

clamp靶机复现
靶机设置 设置靶机为NAT模式 靶机IP发现 nmap 192.168.112.0/24 靶机IP为192.168.112.143 目录扫描 dirsearch 192.168.112.143 访问浏览器 提示让我们扫描更多的目录 换个更大的字典,扫出来一个 /nt4stopc/ 目录 目录拼接 拼接 /nt4stopc/ 发现页面中有很多…...

mfc100u.dll丢失问题分析,详细讲解mfc100u.dll丢失解决方法
面对mfc100u.dll文件丢失带来的挑战时,许多用户都可能感到有些无助,尤其是当这一问题影响到他们日常使用的软件时。但实际上,存在几种有效方法可以帮助您快速恢复该关键的系统文件。为了方便不同水平的用户,本文将详细解析各种处理…...

【C++】什么是内存管理?
如果有不懂的地方,可以看我以往文章哦! 个人主页:CSDN_小八哥向前冲 所属专栏:C入门 目录 C/C内存分布 C内存管理方式 new/delete操作内置类型 new/delete操作自定义类型 operator new与operator delete函数 new和delete实现…...

产业经济大脑建设方案(五)
为了提升产业经济的智能化水平,我们提出建设一个综合产业经济大脑系统,该系统通过整合大数据分析、人工智能和云计算技术,构建全方位的数据采集、处理和决策支持平台。该平台能够实时监测产业链各环节的数据,运用智能算法进行深度…...

如何在 Odoo 16 中覆盖创建、写入和取消链接方法
Odoo 是一款强大的开源业务应用程序套件,可为各种业务运营提供广泛的功能。其主要功能之一是能够自定义和扩展其功能以满足特定的业务需求。在本博客中,我们将探讨如何覆盖Odoo 16中的创建、写入和取消链接方法,从而使您无需修改核心代码…...

pip离线安装accelerate
一、离线下载到当前文件夹 pip download accelerate -d ./anzhuangbao# 制定版本使用以下命令pip download accelerate0.32.0 -d ./anzhuangbao二、离线安装 cd anzhuangbaipip install --no-index --find-links. accelerate三、验证是否安装 pip show accelerateAccelerate: …...