【Vite+Ts】自动按需引入Element-Plus

news/2024/5/30 17:22:21/文章来源:https://blog.csdn.net/yasyList/article/details/136676110

安装插件

cnpm i -D unplugin-vue-components unplugin-auto-import unplugin-element-plus

修改vite.config.ts

// vite.config.ts
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import ElementPlus from "unplugin-element-plus/vite";export default defineConfig({// ...plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],dts: "types/auto-generate/auto-import.d.ts",}),Components({resolvers: [ElementPlusResolver()],dts: "types/auto-generate/components.d.ts",}),ElementPlus({}),],
})

然后就可以使用了!图标的我就直接全局导入了,想自动导入看下面:

icon图标自动导入:

cnpm i -D unplugin-icons

vite.config.ts增加:

// 自动导入图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
// plugins修改:
AutoImport({resolvers: [ElementPlusResolver(),// 自动导入图标组件IconsResolver({prefix: 'Icon',})],dts: "types/auto-generate/auto-import.d.ts",
}),
Components({resolvers: [ElementPlusResolver(),// 自动注册图标组件IconsResolver({enabledCollections: ['ep'],}),],dts: "types/auto-generate/components.d.ts",
}),
// 导入图标组件
Icons({autoInstall: true,
})用法:
<el-icon><Plus /></el-icon>  错误
<el-icon><i-ep-plus /></el-icon>  正确必须要加i-ep

关于页面 ElMessageBox 报错问题:

我目前最快的解决办法只能是单独引入ElMessageBox。有更好的方法欢迎留言。
用法:

<script setup lang="ts">
import { ElMessageBox } from "element-plus";
ElMessageBox({/**/})
</script>

在这里插入图片描述
感谢你的阅读,如对你有帮助请收藏+关注!
只分享干货实战精品从不啰嗦!!!
如某处不对请留言评论,欢迎指正~
博主可收徒、常玩QQ飞车,可一起来玩玩鸭~

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

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

相关文章

以太坊ETF获批将至

作者&#xff1a;BitMEX Research 编译&#xff1a;秦晋 摘要&#xff1a;在这篇文章中&#xff0c;我们讨论了以太坊ETF将在美国获得批准的可能性。我们尤其关注质押的经济学&#xff0c;以及缺乏收益率会如何在一定程度上削弱非质押以太坊ETF产品的吸引力。我们还研究了实施质…

CBNet(AAAI 2020)论文解析

paper&#xff1a;CBNet: A Novel Composite Backbone Network Architecture for Object Detection official implementation&#xff1a;GitHub - VDIGPKU/CBNet_caffe: Composite Backbone Network (AAAI20) 背景 一般来说&#xff0c;在基于CNN的目标检测模型中&#xff…

JAVA-网络编程基础

JAVA-网络编程 01. 网络通信 概念&#xff1a;两台设备之间通过网络实现数据传输网络通信&#xff1a;将数据通过网络从一台设备传输给另一台设备java.net包下提供了一系列类或接口&#xff0c;供程序员使用&#xff0c;完成网络通信 02. 网络 概念&#xff1a;两台设备或…

【PLIO学习总结】laserMapping中的时间戳与状态更新逻辑

本文仅用于个人学习总结记录。如有错误&#xff0c;请批评指正。 0、PLIO简要思路 从PLIO的论文中&#xff0c;可以知道&#xff0c;完整的PLIO算法采用IMU和LiDAR数据同时作为“输入”&#xff0c;维护状态变量包括加速度和角速度。 同时&#xff0c;PLIO是一种distortion-…

300分钟吃透分布式缓存-21讲:Redis读取请求数据后,如何进行协议解析和处理?

Redis 协议解析及处理 协议解析 上一课时讲到&#xff0c;请求命令进入&#xff0c;触发 IO 读事件后。client 会从连接文件描述符读取请求&#xff0c;并存入 client 的 query buffer 中。client 的读缓冲默认是 16KB&#xff0c;读取命令时&#xff0c;如果发现请求超过 1GB…

keycloak18.0.0==前后端分离项目中使用,前端react后端springboot

配置keycloak 启动keycloak18 新建一个realm,名字叫test1 新建两个client&#xff0c;一个用于前端&#xff0c;一个用于后端 第一个 react http://localhost:8081/auth/realms/test1/react/ 第二个 backend-service 在两个client下分别创建role testRole backend-servic…

王道OnlineJudge 14

题目 二叉树层次建树就是一层一层的建树&#xff0c;从左到右。随着纵向层次的深入&#xff0c;结点的数量变化规律为&#xff1a;1→2→4→8→16→32。 先画图&#xff0c;然后看图可闭眼写代码 右边为辅助队列&#xff0c;有多少个二叉树结点&#xff0c;就有多少个辅助队…

构建高效可靠的消息队列系统:设计与实现

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; 目录 一、引言 二、设计目标 2.1、高可用性 1. 集群搭建 1.1 …

万字完整版【C语言】指针详解~

一、前言 初始指针&#xff08;0&#xff09;&#xff1a;着重于讲解指针的概念、基本用法、注意事项、以及最后如何规范使用指针深入指针&#xff08;1&#xff09;&#xff1a;讲解指针变量常见的类型&#xff0c;如何去理解这些类型、最后就是如何正确的使用深入指针&#…

详解MySQL的MVCC(ReadView部分解析C++源码)

文章目录 1. 什么是MVCC2. MVCC核心组成&#xff08;三大件&#xff09;2.1 MVCC为什么需要三大件 3. 隐藏字段4. undo log4.1 模拟版本链数据形成过程 5. Read View5.1 m_ids5.2 m_creator_trx_id5.3 m_low_limit_id5.4 m_up_limit_id5.5 可见性分析算法 6. MVCC流程模拟6.1 R…

模仿Gitee实现站外链接跳转时进行确认

概述 如Gitee等网站&#xff0c;在有外部链接的时候如果不是同域则会出现一个确认页面。本文就带你看看这个功能应该如何实现。 效果 实现 1. 实现思路 将打开链接作为参数传递给一个中间页面&#xff0c;在页面加载的时候判断链接的域名和当前网站是否同域&#xff0c;同域…

Unity3d C#实现文件(json、txt、xml等)加密、解密和加载(信息脱敏)功能实现(含源码工程)

前言 在Unity3d工程中经常有需要将一些文件放到本地项目中&#xff0c;诸如json、txt、csv和xml等文件需要放到StreamingAssets和Resources文件夹目录下&#xff0c;在程序发布后这些文件基本是对用户可见的状态&#xff0c;造成信息泄露&#xff0c;甚至有不法分子会利用这些…

oracle linux7.9(centos7.9)安装nvidia GPU显卡驱动

一.业务场景 公司服务器配置了nvidia GPU显卡&#xff0c;安装的是oracle linux7.9操作系统&#xff0c;以下是安装GPU显卡驱动的操作。 二.GPU显卡驱动的前安装步骤 1.安装前的依赖软件的安装 yum -y install epel-release kernel-devel dkms gcc备注&#xff1a;利用unam…

MySQL通过SQL语句进行递归查询

这里主要是针对于MySQL8.0以下版本&#xff0c;因为MySQL8.0版本出来了一个WITH RECURSIVE函数专门用来进行递归查询的 先看下表格数据&#xff0c;就是很普通的树结构数据&#xff0c;通过parentId关联上下级关系 下面我们先根据上级节点id递归获取所有的下级节点数据&#x…

day02vue学习

day02 一、今日学习目标 1.指令补充 指令修饰符v-bind对样式增强的操作v-model应用于其他表单元素 2.computed计算属性 基础语法计算属性vs方法计算属性的完整写法成绩案例 3.watch侦听器 基础写法完整写法 4.综合案例 &#xff08;演示&#xff09; 渲染 / 删除 / 修…

【性能测试】移动测试md知识总结第1篇:移动端测试课程介绍【附代码文档】

移动测试完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;移动端测试课程介绍&#xff0c;移动端测试知识概览&#xff0c;移动端测试环境搭建&#xff0c;ADB常用命令学习主要内容,学习目标,学习目标,1. window安装andorid模拟器,学习目标。主流移动端自动…

springboot的maven多模块如何混淆jar包

springboot的maven多模块如何混淆jar包 一.简介二. 示例2.1 基本配置2.2 结果 三. 错误3.1 错误13.2 错误2 四. 参考文章 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 一.简介 …

【C语言】字符串函数上

&#x1f451;个人主页&#xff1a;啊Q闻 &#x1f387;收录专栏&#xff1a;《C语言》 &#x1f389;道阻且长&#xff0c;行则将至 前言 这篇博客是字符串函数上篇&#xff0c;主要是关于长度不受限制的字符串函数&#xff08;strlen,strcpy,strcat,strcm…

比特币创造历史新纪录

综合来源&#xff1a;coindesk and cointelegraph 编译&#xff1a;秦晋 3月11日&#xff0c;比特币在亚洲交易时段首次突破71,000美元&#xff0c;这个是比特币创造的价格新纪录。自1月11日比特币现货ETF在美国获批以来&#xff0c;比特币一直在稳步上涨。以太币突破4000美元。…

计算机基础:一些你必须知道的名词详解,必须要会的理论知识

软件测试 计算机基本特点 计算机硬件组成 内存储器和外存储器特点 计算机软件系统组成 常见的操作系统软件 编码 计算机数据计量单位 浏览器 图片类型 网页打开过程 客户端、服务器、请求和响应 dos 命令 软件测试 在规定的条件下对程序进行操作&#xff0c;以发现…