ElementPlus组件与图标按需自动引入

按需自动引入组件

1. 安装ElementPlus和自动导入ElementPlus组件的插件

pnpm install element-plus
pnpm install -D unplugin-vue-components unplugin-auto-import

2. vite.config.ts进行修改

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ElementPlus自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),// 自动导入ElementPlus组件AutoImport({resolvers: [ElementPlusResolver()],}),// 自动注册ElementPlus组件Components({resolvers: [ElementPlusResolver()],}),],
})

然后就可以进行测试了

<template><div class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger" @click="click">Danger</el-button></div>
</template><script lang="ts" setup>
const click = () => {ElMessage.error('Error Message')
}
</script>

使用ElementPlus的组件就会自动在根目录下生成下面两个文件

如果想更改这两个文件的位置,可以传入第二个参数,里面指定文件的位置。由于用到了node的东西,所以最好安装下node的ts类型插件,这样编译器不爆红

pnpm i -D @types/node
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ElementPlus自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 引入node的url模块
import { fileURLToPath } from 'node:url'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),// 自动导入ElementPlus组件AutoImport({resolvers: [ElementPlusResolver()],// 指定ts类型文件位置dts: fileURLToPath(new URL('./types/auto-imports.d.ts', import.meta.url)),}),// 自动注册ElementPlus组件Components({resolvers: [ElementPlusResolver()],// 指定ts类型文件位置dts: fileURLToPath(new URL('./types/components.d.ts', import.meta.url)),}),],
})

现在文件就生成在了types文件夹内了

按需自动引入图标

1. 首先安装依赖

pnpm install @element-plus/icons-vue
pnpm i -D unplugin-icons unplugin-auto-import

2.  vite.config.ts进行修改

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ElementPlus自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 引入node的url模块
import { fileURLToPath } from 'node:url'
//  ElementPlus的Icon自动导入
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),// 自动导入ElementPlus组件AutoImport({resolvers: [ElementPlusResolver(),// 自动导入图标组件IconsResolver({prefix: 'Icon',}),],// 指定ts类型文件位置dts: fileURLToPath(new URL('./types/auto-imports.d.ts', import.meta.url)),}),// 自动注册ElementPlus组件Components({resolvers: [ElementPlusResolver(),// 自动注册图标组件IconsResolver({enabledCollections: ['ep'],}),],// 指定ts类型文件位置dts: fileURLToPath(new URL('./types/components.d.ts', import.meta.url)),}),// 自动安装图标Icons({autoInstall: true,}),],
})

然后就可以进行测试了

<template><div><el-icon color="pink"><Edit /></el-icon></div>
</template>

会发现图标并没有显示出来

其实是换组件名了,可以看下下面的文件,改成对应的组件名就可以显示了

但是有时候,其他组件想用图标,应该怎么写呢?其实正常引入就可以了

<template><div><el-icon color="pink"><IEpEdit /></el-icon><el-button type="primary" :icon="Edit" circle /></div>
</template><script lang="ts" setup>
import { Edit } from '@element-plus/icons-vue'
</script>

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

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

相关文章

2024CICE电博会·以“链主”企业为核心,推动产业链协同发展

随着全球科技日新月异的发展&#xff0c;消费电子产业已成为推动经济增长、改善人民生活的重要力量。中国国际消费电子博览会&#xff08;简称CICE电博会&#xff09;自2001年创办以来&#xff0c;已经走过了二十余个春秋&#xff0c;凭借其独特的地理位置优势、专业的组织策划…

如何开发、使用 Starter

开发 第一步&#xff1a;创建starter工程hello-spring-boot-starter并配置pom.xml文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchem…

趣味C语言——【猜数字】小游戏

&#x1f970;欢迎关注 轻松拿捏C语言系列&#xff0c;来和 小哇 一起进步&#xff01;✊ &#x1f389;创作不易&#xff0c;请多多支持&#x1f389; &#x1f308;感谢大家的阅读、点赞、收藏和关注&#x1f495; &#x1f339;如有问题&#xff0c;欢迎指正 感谢 目录 代码…

BP神经网络-入门到理解-长文讲述

本文来自&#xff1a;老饼讲解-BP神经网络 https://www.bbbdata.com 目录 一、BP神经网络的仿生意义 二、BP神经网络的结构 三、BP神经网络的前馈与后馈 3.1 BP神经网络的前馈 3.2 什么是BP神经网络的后馈 四、BP神经网络的训练 4.1 BP神经网络归一化 4.2 梯度下降算法…

使用SpringCache实现Redis缓存

目录 一 什么是Spring Cache 二 Spring Cache 各注解作用 ①EnableCaching ②Cacheable ③CachePut ④CacheEvict 三实现步骤 ①导入spring cache依赖和Redis依赖 ②配置Redis连接信息 ③在启动类上加上开启spring cache的注解 ④ 在对应的方法上加上需要的注解 一 什么…

重构大学数学基础_week05_雅各比矩阵与雅各比行列式

这周来讲一下雅各比矩阵和雅各比行列式。 多元函数的局部线性属性 首先我们来回顾一下向量函数&#xff0c;就是我们输入一个向量&#xff0c;输出也是一个向量&#xff0c;我们假设现在有一个向量函数 这个函数意思就是在说&#xff0c;我们在原来的平面上有一个向量(x,y),经…

AIGC如何助力创意设计低成本、快速、高效的创作优质内容?

在数字化时代的浪潮中&#xff0c;创意设计行业正经历着一场由AIGC&#xff08;人工智能生成内容&#xff09;技术引领的深刻变革。AIGC以其独特的优势&#xff0c;正在帮助创意设计从业者实现低成本、快速、高效的创作&#xff0c;为行业带来了新的发展机遇。而Adobe国际认证&…

AI赋能前端:你的Chrome 控制台需要AI(爱)

像会永生那样去学习,像明天就要死亡那样去生活。——圣雄甘地 大家好,我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder 此篇文章所涉及到的技术有 AI(Gemini)ChromeDevTool🪜魔法接码平台因为,行文字数所限,有些概念可能会一带而过亦或者提供对应的学习…

MyBatis-Plus 查询不到数据,但使用 SQL 可以查询到数据的问题排查

目录 前言 一、问题描述 示例代码 二、排查步骤 1. 检查数据源配置 2. 检查实体类与数据库表结构 3. 检查 Mapper 接口 4. 检查 MyBatis-Plus 配置 5. 排查查询条件 6. 检查日志输出 7. 检查数据库连接问题 8. 检查全局配置和插件 三、解决方案 前言 在开发过程中&…

数学建模系列(4/4):Matlab建模实战

目录 引言 1. Matlab简介与安装 1.1 Matlab简介 1.2 Matlab的安装 2. Matlab基础操作 2.1 Matlab基础语法和常用命令 2.2 Matlab中的数据类型和数据结构 3. 用Matlab进行建模 3.1 矩阵运算与线性代数 矩阵运算 3.2 Matlab中的绘图功能 绘制2D图形 绘制3D图形 3.3…

黄历工具网/万年历/财神方位/日历/佛历/道历/24节气/PHP网站源码

黄历工具网/万年历/财神方位/日历/佛历/道历/24节气/PHP网站源码 演示地址&#xff1a; https://hl.caohongji.com/ 手机端地址&#xff1a; https://mhl.caohongji.com/ 客服&#xff1a; kkmp326 源码说明&#xff1a; 1、系统内的黄历宜忌、农历、日历、佛历、道…

【R语言】Linux-Ubuntu22系统下R语言的安装与卸载

文章目录 安装sudo安装conda安装编译安装----可安装最新版本1.进入Root权限 卸载1. 删除R语言的安装目录2. 删除R语言的配置文件 安装 有两种简便的方法可以在Linux下安装R&#xff0c;但版本都不够新 sudo安装 ### 更新信息并安装R环境&#xff1a; sudo apt update sudo a…

51串口通讯

介绍 串口是一种应用十分广泛的通讯接口&#xff0c;串口成本低、容易使用、通信线路简单&#xff0c;可实现两个设备的互相通信。单片机的串口可以使单片机与单片机、单片机与电脑、单片机与各式各样的模块互相通信&#xff0c;极大的扩展了单片机的应用范围&#xff0…

禅道身份认证绕过漏洞(QVD-2024-15263)复现

禅道项目管理系统在开源版、企业版、旗舰版的部分版本中都存在此安全漏洞。攻击者可利用该漏洞创建任意账号实现未授权登录。 1.漏洞级别 高危 2.漏洞搜索 fofa: title"禅道"3.影响范围 v16.x < 禅道 < v18.12 &#xff08;开源版&#xff09; v6.x <…

C++(part2、3-Linux系统编程+数据库项目):Linux网络云盘

文章目录 一、项目需求分析1.一期&#xff1a;命令行解析(1)cd(用栈管理)、ls、pwd(2)puts、gets(3)mkdir、touch、rmdir、rm 2.二期&#xff1a;密码验证、日志、断点续传、大文件传输(1)密码验证(2)日志(3)断点续传(4)大文件传输 3.三期&#xff1a;用户注册、用户登录、虚拟…

【UIDynamic-动力学-UIPushBehavior-推行为 Objective-C语言】

一、接下来,我们来说这个,推行为, 1.推行为,首先,它叫做UIPushBehavior, 这个里边呢,又分为持续推力、瞬时推力, 我们新建一个项目,叫做:13-推行为 我们这个里边,还是先来一个redView, UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(100,100,…

Navicat连接服务器MySQL

Navicat连接服务器MySQL 1. Navicat连接服务器MySQL2. 如何查看MySQL用户名和密码3. 修改MySQL登录密码4. 安装MySQL(Centos7)遇到错误和问题1. error 1045 (28000): access denied for user rootlocalhost (using password:yes) 1. Navicat连接服务器MySQL 选择数据库 直接使用…

Java-内部类成员内部类

类的五大成员 属性 方法 构造方法 代码块 内部类 什么是内部类&#xff1f; 在一个类的里面&#xff0c;再定义一个类。 举例&#xff1a;在A类的内部定义B类&#xff0c;B类就被称为内部类 内部类表示的事物是外部类的一部分 内部类单独出现没有任何意义 内部类的访问特点 1.…

sed和awk

sed和awk 文章目录 sed和awksedawk grep就是查找文件中的内容&#xff0c;扩展正则表达式 sed sed是一种流编辑器&#xff0c;一次处理一行内容&#xff08;增删改查&#xff09; 如果只是展示&#xff0c;会放在缓冲区&#xff08;模式空间&#xff09;&#xff0c;展示结束…

面向对象六大设计原则--依赖倒置

目录 六大原则 定义 概念 Java语言中的表现 优点 在设计模式中体现 工厂方法模式 观察者模式 状态模式 示例 手机模块设计 五个示例 一、读取数据 二、发送消息 三、支付方式 四、日志记录 五、数据持久化 使用汽车驾驶进行说明 依赖的三种写法 1.构造函数…