Vue:自动按需导入element-plus图标

自动导入使用 unplugin-iconsunplugin-auto-import 从 iconify 中自动导入任何图标集。
完整vite.config.js参考模板
https://download.csdn.net/download/ruancexiaoming/88928539

导入element-plus图标

命令行安装unplugin-icons

pnpm i -D unplugin-icons

//没有安装自动导入组件的执行下面
pnpm i -D unplugin-vue-components unplugin-auto-import

编辑vite.config.js

//vite.config.js
//加入以下代码
import Icons from "unplugin-icons/vite"
import IconsResolver from "unplugin-icons/resolver"
//...
		plugins: [
			vue(),
			AutoImport({
				imports: ["vue"],
				//加入以下代码
				resolvers: [
					ElementPlusResolver(),
					IconsResolver({}),
				],
				dts: "./typing/auto-imports.d.ts",
			}),
			Components({
				//加入以下代码
				resolvers: [
					// 自动导入图标组件
					IconsResolver({
						enabledCollections: ["ep"],
					}),
					// 自动导入 Element Plus 组件
					ElementPlusResolver(),
				],
			}),
			//加入以下代码
			Icons({
				// 自动安装图标库
				autoInstall: true,
			}),
		],

使用格式<i-ep-名称/>

<el-icon :size="size" :color="color">
	<i-ep-Plus />
</el-icon>

名称直接从官网获取
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/443868.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

银河麒麟V10 安装部署大数据管理软件 DataSophon

一、概览 1、愿景 致力于快速实现部署、管理、监控以及自动化运维大数据云原生平台&#xff0c;帮助您快速构建起稳定、高效、可弹性伸缩的大数据云原生平台。 2、DataSophon是什么 《三体》&#xff0c;这部获世界科幻文学最高奖项雨果奖的作品以惊艳的"硬科幻"…

Joe主题网站

一款博客网站源码 发现源码为大家内置了主题 清爽又强大真正的永久可用的一条源码&#xff0c;该版本为整合版本&#xff0c;内置了Joe主题&#xff0c;搭建后直接启用即可~ 安装环境要求&#xff1a; PHP 7.2 以上 MySQL, PostgreSQL, SQLite 任意一种数据库支持&#xff0c;…

一个爬虫自动化数据采集的故事~

目录 一、原文二、故事前半段背景内容三、正经的讲点DrissionPage知识四、故事的收尾 一、原文 原文来自一个爬虫自动化数据采集的故事~ , 建议点击链接看文章末尾的视频笔者不擅长自动化&#xff0c;一个小小故事分享给大家&#xff0c;仅个人观点 二、故事前半段背景内容 …

C#中对象的相等性与同一性的判断方法总结

C#对象的相等性与同一性 1. 概述与准备1.1 概述1.2 准备 2. Equals(Object)2.1 功能&#xff1a;2.2 实例&#xff1a;2.3 扩展&#xff1a;2.4 重写此方法 3. Equals(Object, Object)3.1 功能3.2 实例 4. ReferenceEquals(Object, Object)4.1 功能4.2 使用场景&#xff1a;4.3…

突破编程_前端_JS编程实例(自适应表格列宽)

1 开发目标 针对如下的表格组件&#xff1a; 根据表格的各个列字符串宽度动态调整表格列宽&#xff1a; 2 详细需求 本组件目标是提供一个自动调整 HTML 表格列宽的解决方案&#xff0c;通过 JS 实现动态计算并调整表格每列的宽度&#xff0c;以使得表格能够自适应容器宽度&a…

Matlab|配电网智能软开关(sop)规划模型

目录 1 主要内容 目标函数 2 部分程序 3 程序结果 3.1 sop选址定容优化模型 3.2 对比算例&#xff08;不含sop&#xff09; 4 下载链接 1 主要内容 该程序参考文献《基于改进灵敏度分析的有源配电网智能软开关优化配置》&#xff0c;采用二阶锥算法&#xff0c;以改进的…

vscode 格式化prettier失败出现一大堆错误

如题&#xff0c;使用vscode开发项目时候&#xff0c;会自动进行格式化【安装prettier插件】 但是有时候会出现格式化失败的情况&#xff0c;如果插件安装正确&#xff0c;则可能是代码出现了格式问题。

使用腾讯云快速搭建WordPress网站流程详解

专栏系列文章&#xff1a; WordPress建站主题美化系列教程https://blog.csdn.net/seeker1994/category_12184577.html 一文搞懂WordPress是什么&#xff1f;为什么用它建站&#xff1f;怎么安装与部署&#xff1f; 初次安装WordPress后如何进行网站设置&#xff08;主题安装、…

揭秘接口测试:完整流程指南!

在讲接口测试之前&#xff0c;首先需要给大家申明下&#xff1a;接口测试对于测试人员而言&#xff0c;非常非常重要&#xff0c;懂功能测试接口测试&#xff0c;就能在企业中拿到一份非常不错的薪资。 这么重要的接口测试&#xff0c;一般也是面试笔试必问。为方便大家更好的…

Python快速入门系列-2(Python基础语法)

第三章&#xff1a;Python基础语法 3.1 变量与数据类型3.1.1 变量的定义与赋值3.1.2 数据类型3.1.3 类型转换 3.2 注释与缩进3.2.1 注释3.2.2 缩进 3.3 条件语句与循环结构3.3.1 条件语句3.3.2 循环结构 3.4 函数与模块3.4.1 函数3.4.2 参数和返回值3.4.3 模块3.4.4 标准库中的…

基于SSH的点餐服务管理系统的设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 开发工具相关技术 3 1.1 SSH框架 3 1.1.1 Spring 3 1.1.2 Spring MVC 3 1.1.3 Hibernate 4 1.2 前端技术 4 1.2.1 jQuery 5 1.2.2 Bootstrap 5 1.3 数据库技术 5 1.4 本章小结 6 2 系统分析 7 2.1 需求分析 7 2.2 系统工作流程 8 2.3 用例…

一学就会 | ChatGPT提示词极简指南-有爱AI实战教程(三)

演示站点&#xff1a; https://ai.uaai.cn 对话模块 官方论坛&#xff1a; www.jingyuai.com 京娱AI 导读&#xff1a;在使用 ChatGPT 时&#xff0c;当你给的指令越精确&#xff0c;它的回答会越到位&#xff0c;举例来说&#xff0c;假如你要请它帮忙写文案&#xff0c;如…

【Claude 3】一文谈谈Anthropic(Claude) 亚马逊云科技(Bedrock)的因缘际会

文章目录 前言1. Anthropic的诞生2. Anthropic的“代表作”——Claude 3的“三驾马车”3. 亚马逊云科技介绍4. 强大的全托管服务平台——Amazon Bedrock5. 亚马逊云科技(AWS)和Anthropic的联系6. Claude 3模型与Bedrock托管平台的关系7. Clude 3限时体验入口分享【⚠️截止3月1…

【Flink】Apache Flink 常见问题定位指南

Apache Flink 常见问题定位指南 1.问题分析概览1.1 如何分析 Flink 问题 2.常见问题处理2.1 作业自动停止2.2 输出量稳定但不及预期2.3 输出量逐步减少或完全无输出2.4 个别数据缺失2.5 作业频繁重启 3.问题追因技巧3.1 常用工具3.1.1 内存3.1.2 CPU3.1.3 磁盘 I/O3.1.4 网络 I…

187基于matlab的弹道目标跟踪滤波方法

基于matlab的弹道目标跟踪滤波方法&#xff0c;扩展卡尔曼滤波&#xff08;extended Kalman filter, EKF&#xff09;、转换测量卡尔曼滤波&#xff08;conversion measurement Kalman filter, CMKF&#xff09;跟踪滤波&#xff0c;得到距离、方位角、俯仰角误差结果。程序已调…

qt一个项目只能有一个QMainWindow,其他小窗口只能继承QWidget

我继承QMainWindow&#xff0c;结果就出现奇奇怪怪的现象&#xff0c;我人都疯了 这些接口全他妈不能用 删了换成QWidget就可以用了

ROS2中launch编写及参数含义(xml、python)

ROS2系列文章目录 ROS2中nav_msgs/msg/Path 数据含义及使用 ROS2中std_msgs/msg/Header 数据含义及使用 ROS中TF变换详解 文章目录 ROS2系列文章目录ROS2中launch编写及参数含义&#xff08;xml、python&#xff09;一、ROS官方介绍二、实现案例1.编写主函数、CMakeLists.tx…

qt的layoutStretch,非常重要

在几个控件横着布局中&#xff0c;不要指望着这些限制大小的接口能帮你什么 a->setMaximumWidth(); a->setMinimumWidth();我这里有两个控件&#xff0c;设置layoutStretch 1,1

poll开发服务器

int poll(struct pollfd *fds, nfds_t nfds, int timeout); 函数说明&#xff1a;与select类似&#xff0c;委托内核监控可读&#xff0c;可写&#xff0c;异常事件。 函数说明&#xff1a; fds&#xff1a;一个struct pollfd结构体数组的首地址 struct pollfd { …

上门废品回收小程序开发,互联网回收创业模式,稳占回收市场

随着人们生活水平的提高&#xff0c;我国居民产生了大量的废弃物品&#xff0c;这为废品回收行业提供了巨大的市场空间。 当下&#xff0c;废品回收行业成为了不少年轻人讨论的热门话题&#xff0c;吸引了越来越多的企业商家进行到市场中&#xff0c;成为了一个创业的重要行业…