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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

保姆级讲解字符串函数(上篇)

目录 字符分类函数 导图 函数介绍 1.getchar 2. isupper 和 islower 字符转换函数&#xff1a;&#xff08;toupper , tolower&#xff09; 与 putchar 字符串函数 导图 string函数的使用和模拟实现 string的使用 求字符串长度 字符串的比较 string函数的模拟实现…

四桥臂三相逆变器动态电压恢复器(DVR)MATLAB仿真

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 简介 四桥臂三相逆变器 电路 的一般形式如图 1&#xff0c;为 便于分析 &#xff0c;将其等效成图所示的电路 。以直流母线电压Ud的 1&#xff0f;2处为参考点 &#xff0c;逆变器三相和零线相 输 出可等效成…

【FFmpeg】ffmpeg 命令行参数 ⑤ ( 使用 ffmpeg 命令提取 音视频 数据 | 保留封装格式 | 保留编码格式 | 重新编码 )

文章目录 一、使用 ffmpeg 命令提取 音视频 数据1、提取音频数据 - 保留封装格式2、提取视频数据 - 保留封装格式3、提取视频数据 - 保留编码格式4、提取视频数据 - 重新编码5、提取音频数据 - 保留编码格式6、提取音频数据 - 重新编码 一、使用 ffmpeg 命令提取 音视频 数据 1…

全网最最最详细centos7如何安装docker教程

在CentOS 7上安装Docker主要包括以下步骤&#xff1a; 1. 卸载旧版本的Docker 首先&#xff0c;需要确保系统上没有安装旧版本的Docker。可以通过以下命令来卸载它们&#xff1a; sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-late…

【已解决】无法删除自己上传在CSDN的资源怎么办?(2024亲测可用)

文章目录 1. 前情提要2. 实测过程3. 解决方案 1. 前情提要 我在 CSDN 上发布了一个免费资源&#xff0c;近几天却有粉丝反馈这个免费资源现在要开 VIP 才能下载&#xff0c;于是我想删除这个资源重新上传&#xff0c;但系统提示我没有权限&#xff0c;被下载过的资源无法删除&…

java-ssm-jsp-基于ssm的宠物领养系统的设计与实现

java-ssm-jsp-基于ssm的宠物领养系统的设计与实现 获取源码——》公主号&#xff1a;计算机专业毕设大全

AI给开发经验3-5年的程序员的一些建议

Q: 你是一名CTO&#xff0c;请你给开发经验3-5年的程序员一些职业和生活方面的建议&#xff0c;1500字。 A: 作为一名有着丰富经验的CTO&#xff0c;我深知程序员在职业道路上的成长并非一帆风顺。针对开发经验在3-5年的程序员&#xff0c;我想从职业和生活两个方面&#xff0…

HCIA-HarmonyOS设备开发认证V2.0-习题2

目录 习题一习题二坚持就有收获 习题一 # 判断题## 1.PWM占空比指的是低电平时间占周期时间的百分比。(错误)正确(True)错误(False)解题&#xff1a; - PWM占空比指的是高电平时间占周期时间的百分比## 2.UART是通用异步收发传输器&#xff0c;是通用串行数据总线&#xff0c;…

excel 动态列导出

excel动态列&#xff0c;只好用poi来写了&#xff0c;也并不复杂&#xff0c;一样就这个件事情抽像为几步&#xff0c;就是套路了&#xff0c;开发效率就上去了。 1 准备空模板 导出操作与excel模板的导出一样&#xff0c;可以参考excel导出标准化 2 自定义SheetWriteHandler …

苍穹外卖-day01

苍穹外卖-day01 目录 苍穹外卖-day01课程内容1. 软件开发整体介绍1.1 软件开发流程1.2 角色分工1.3 软件环境 2. 苍穹外卖项目介绍2.1 项目介绍2.2 产品原型2.3 技术选型 3. 开发环境搭建3.1 前端环境搭建3.2 后端环境搭建3.2.1 熟悉项目结构3.2.2 Git版本控制3.2.3 数据库环境…

简洁的在线观影开源项目

公众号&#xff1a;【可乐前端】&#xff0c;每天3分钟学习一个优秀的开源项目&#xff0c;分享web面试与实战知识。 每天3分钟开源 hi&#xff0c;这里是每天3分钟开源&#xff0c;很高兴又跟大家见面了&#xff0c;今天介绍的开源项目简介如下&#xff1a; 仓库名&#xff1…

伪分布Hadoop的安装与部署

1.实训目标 &#xff08;1&#xff09;熟悉掌握使用在Linux下安装JDK。 &#xff08;2&#xff09;熟悉掌握使用在Linux下安装Hadoop。 &#xff08;3&#xff09;熟悉掌握使用配置SSH免密登录。 2.实训环境与软件 环境 版本 说明 Windows 10系统 64位 操作电脑配置 …