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

news2024/11/16 23:32:10

自动导入使用 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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue中用户权限如何处理?

Vue中用户权限如何处理&#xff1f; 在 Vue 中&#xff0c;可以采用多种方式来处理用户权限&#xff0c;以下是一些常见的方法&#xff1a; 1. 使用路由守卫 Vue Router 提供了 beforeEach 导航守卫&#xff0c;可以在路由跳转之前进行权限检查。例如&#xff1a; router.be…

【vue.js】文档解读【day 3】 | 条件渲染

如果阅读有疑问的话&#xff0c;欢迎评论或私信&#xff01;&#xff01; 文章目录 条件渲染前言&#xff1a;v-ifv-elsev-else-iftemplate中的v-ifv-showv-if vs v-show 条件渲染 前言&#xff1a; 在JavaScript中&#xff0c;我们知道条件控制语句可以控制程序的走向&#…

手写分布式配置中心(六)整合springboot(自动刷新)

对于springboot配置自动刷新&#xff0c;原理也很简单&#xff0c;就是在启动过程中用一个BeanPostProcessor去收集需要自动刷新的字段&#xff0c;然后在springboot启动后开启轮询任务即可。 不过需要对之前的代码再次做修改&#xff0c;因为springboot的配置注入value("…

746. 使用最小花费爬楼梯 (Swift版本)

题目 给你一个整数数组 cost&#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。 请你计算并返回达到楼梯顶部的最低花费。 限制条件 2…

6. 虚拟机及Linux安装

虚拟机及Linux安装 进行嵌入式项目开发&#xff0c;第一步就是要建立嵌入式开发环境&#xff0c;主要包括安装 Bootloader 工具、不同平台的交叉编译器&#xff08;如ARM 平台的arm-linux-gcc&#xff09;、内核源码树&#xff08;在需要编译和配置内核时&#xff09;、在调试…

Python-sklearn.datasets-make_blobs

​​​​​​sklearn.datasets.make_blobs()函数形参详解 """ Title: datasets for regression Time: 2024/3/5 Author: Michael Jie """from sklearn import datasets import matplotlib.pyplot as plt# 产生服从正态分布的聚类数据 x, y, cen…

Ps:渐变工具 - 经典渐变

渐变工具 Gradient Tool常用于背景填充和界面元素设计&#xff0c;可创建平滑的颜色过渡效果。也可用于图层蒙版上&#xff0c;控制图像或效果的平滑混合。 快捷键&#xff1a;G 渐变工具选项栏中有两种模式&#xff1a;渐变 Gradient和经典渐变 Classic gradient&#xff0c;经…

CSS中em/px/rem/vh/vw区别详解

文章目录 一、介绍二、单位pxemremvh、vw 三、总结 一、介绍 传统的项目开发中&#xff0c;我们只会用到px、%、em这几个单位&#xff0c;它可以适用于大部分的项目开发&#xff0c;且拥有比较良好的兼容性 从CSS3开始&#xff0c;浏览器对计量单位的支持又提升到了另外一个境…

信息系统项目管理师--进度管理

项⽬进度管理是为了保证项⽬按时完成&#xff0c;对项⽬所需的各个过程进⾏管理&#xff0c;包括规划进度、 定义活动、排列活动顺序、估算活动持续时间、制订项⽬进度计划和控制进度。⼩型项⽬中&#xff0c; 定义活动、排列活动顺序、估算活动持续时间及制定进度模型形成进度…

【办公类-21-09】三级育婴师 视频转音频Python

背景需求&#xff1a; 用AI对话工具试试能否Python将MP4视频转成音频&#xff0c;再转成文字docx&#xff08;不用格式工厂转&#xff09; 结果&#xff1a; 视频MP4转音频wav 视频MP4转音频wav 作者&#xff1a;AI对话大师&#xff0c; 时间&#xff1a;2024年3月8日 impo…

利用GPT开发应用004:从GPT-1到GPT-3

文章目录 一、GPT-1二、GPT-2三、GPT-3四、从GPT-3到InstructGPT 一、GPT-1 2018年年中&#xff0c;就在变换器架构问世一年后&#xff0c;OpenAI发表了一篇题为“通过生成式预训练改进语言理解”的论文&#xff0c;作者是Radford, Alec等人。在这篇论文中&#xff0c;该公司介…

ODI报错

三月 08, 2024 1:20:09 下午 oracle.odi.mapping 信息: Start generation of map physical design: MapPhysicalDesign New_Mapping.物理 三月 08, 2024 1:20:09 下午 oracle.odi.mapping 信息: Finished generation of map physical design: MapPhysicalDesign New_Mapping.物…

BUUCTF-Misc4

镜子里面的世界1 1.打开附件 解压&#xff0c;是一张图片 2. zsteg工具 用zsteg分析图片 3.得到flag ningen1 1.打开附件 是一张图片 2.binwalk 用binwalk -e 分离文件 3.ARCHPR工具 打开分离后的文件夹&#xff0c;有一个加密的压缩包&#xff0c;用ARCHPR解密 4.解密 将…

sheng的学习笔记-AI-多分类学习:ECOC,softmax

目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 基本术语&#xff1a; 若我们欲预测的是离散值&#xff0c;例如“好瓜”“坏瓜”&#xff0c;此类学习任务称为“分类”(classification)&#xff1b; 若欲预测的是连续值&#xff0c;例如西瓜成熟度0.95、0.37&#xff0c;…

HNU-计算机网络-甘晴void学习感悟

前言 计算机网络其实我没太学懂&#xff0c; 仅从应试来说&#xff0c;考试成绩也不太好。 这也是为什么一直没有更新这一学科的学习感悟。 大三下还是有点闲&#xff0c;一周三天小长假&#xff0c;闲来无事还是给写了。 教材使用这本&#xff1a; 总领 期中考试 30% 期…

排序——希尔排序、插入排序

本节复习排序中的希尔排序&#xff0c;希尔排序属于插入排序。 希尔排序的代码和插入排序非常类似。 思想却相对于插入排序来说复杂。 在复习希尔排序之前&#xff0c; 我们需要先复习一下插入排序。 目录 插入排序 插入过程 代码实现 希尔排序 希尔排序的思想 代码实…

#onenet网络请求http(GET,POST)

参考博文&#xff1a; POST: https://blog.csdn.net/qq_43350239/article/details/104361153 POST请求&#xff08;用串口助手测试&#xff09;&#xff1a; POST /devices/1105985351/datapoints HTTP/1.1 api-key:AdbrV5kCRsKsRCfjboYOCVcF9FY Host:api.heclouds.com Con…

C++自创题目——几点了 very hard ver.

题目难度 普及 题目描述 一个老外用一口不流利的中文问你&#xff1a;“Xian zai ji dian le?”你看了一眼表&#xff0c;知道了现在是&#xff0c;你准备用这样的形式写在纸上&#xff1a; Now is m past/to h. 如果你看不懂&#xff0c;举个例子&#xff1a; 当h10&#…

python基础10_转义类型转换

这篇博客我们来学一下转义字符 首先什么是转义字符呢? 转义字符就是在编程中用于表示一些特殊的字符,比如说换行,在字符串中,需要换行吧,然后是不是有些时候还要在字符串中按tab键, 或者是enter键, 或者是引号,这些都是特殊字符,然后就是通过转义.把这些从普通字符转成具有特…

力扣面试经典150 —— 11-15题

力扣面试经典150题在 VScode 中安装 LeetCode 插件即可使用 VScode 刷题&#xff0c;安装 Debug LeetCode 插件可以免费 debug本文使用 python 语言解题&#xff0c;文中 “数组” 通常指 python 列表&#xff1b;文中 “指针” 通常指 python 列表索引 文章目录 11. [中等] H指…