配置 Vite 自动导入 ElementPlus 组件、函数、Icons、样式
使用 Vite 的自动导入的前提是项目是 TS 项目,JS 项目使用 Vite 自动导入不生效。安装以下 5 个包到 devDependencies:
cnpm i -D unplugin-icons unplugin-auto-import @iconify-json/ep unplugin-auto-import unplugin-vue-components
配置vite.config.ts
:
// vite.config.ts
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
// element plus
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
// icons
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
export default defineConfig({
plugins: [
vue(),
AutoImport({
// 自动导入 vue 相关 api
imports: ["vue"],
resolvers: [
// 自动导入 element plus 的函数、如 elmessage
ElementPlusResolver(),
// 图标导入
IconsResolver({
prefix: "Icon"
})
]
}),
Components({
resolvers: [
ElementPlusResolver(),
// 图标导入,通过 i-ep-xxx 格式使用 element plus 图标
IconsResolver({
enabledCollections: ["ep"]
})
],
// 自动导入的组件包含文件夹,扫描该文件夹下所有 .vue 文件
dirs: ["./src/components/**"]
}),
Icons({
autoInstall: true
})
]
});
在组件模板中使用 element-plus 的图标集:
<i-ep-search />
<!-- 或者 -->
<IEpSearch />
如果 Element-Plus 组件没有提供图标插槽,图标不能自动导入到 props 中,还是需要自己手动导入。比如:
<el-popconfirm
confirm-button-text="确定"
cancel-button-text="取消"
icon-color="#626AEF"
:icon="InfoFilled"
title="确定删除该评论?"
>
</el-popconfirm>
上面的组件没有提供 icon 插槽,提供图标只能通过 props,InfoFilled 改成 IEpInfoFilled 的话不能被识别,需要导入该图标:
import { InfoFilled } from "@element-plus/icons-vue";
main.ts
无需引入 element-plus 的 index 文件和app.use(ElementPlus);
。避免编辑器和 TS 编译器误报错,需要在tsconfig.json
文件里写两个文件的路径:
{
"include": ["auto-imports.d.ts", "components.d.ts"]
}
配置 Vite 自动导入 ElementPlus 组件、函数、Icons、样式的更多相关文章
- Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
本章内容 自定义属性快速入门 外化配置 自动配置 自定义创建 Starter 组件 摘录:读书是读完这些文字还要好好用心去想想,写书也一样,做任何事也一样 图 2 第二章目录结构图 第 2 章 Spr ...
- [转]Office导入导出组件权限配置汇总
原文地址:Office导入导出组件权限配置汇总 具体配置方法如下: 1:在服务器上安装office的Excel软件. 2:在"开始"->"运行"中输入 ...
- IDEA推荐配置(自动导入包、提示不区分大小写)
设置快捷键方式为eclipse 设置代码提示不区分大小写 自动导入包 可以通过 Ctrl + 鼠标滚轮 来控制代码字体大小显示 显示行号和显示区分方法线 代码一行显示不下,软分行显示,点击鼠标右键 增 ...
- geotrellis使用(二十一)自动导入数据
目录 前言 整体介绍 前台界面 后台控制 总结 一.前言 之前Geotrellis数据导入集群采用的是命令行的方式,即通过命令行提交spark任务来ingest数据,待数据导入完毕再启动 ...
- Ipython自动导入Numpy,pandas等模块
一.引言 最近在学习numpy,书上要求安装一个Ipythpn,可以自动导入Numpy,pandas等数据分析的模块,可是当我安装后,并不能自动导入numpy模块,还需要自己import.我就去查了一 ...
- springboot自动装配(1)---@SpringBootApplication注解怎么自动装配各种组件
1.对于springboot个人认为它就是整合了各种组件,然后提供对应的自动装配和启动器(starter) 2.@SpringBootApplication注解其实就是组合注解,通过它找到自动装配的注 ...
- 2_2.springboot2.x配置之自动配置原理
前言 SpringBoot 自动配置原理: 本文主要分为三大部分: SpringBoot 源码常用注解 SpringBoot 启动过程 SpringBoot 自动配置原理 1. SpringBoot ...
- 图解SSIS监视文件夹并自动导入数据
原文:图解SSIS监视文件夹并自动导入数据 演示案例:让系统自动监视文件夹,并把文件夹下面的excel文件导入到sql中,之后清空目录.这个过程以往都需要写程序来实现或者定时执行,现在可以用ssis来 ...
- Unity3d的模型自动导入帧数表
开发中经常需要,对美术模型进行一些处理.(以fbx为例) 例如,需要把动作的名字.start和end加入animations的clips. 如果手动操作,就是在模型的Inspector窗口,一个动作点 ...
- ipython启动 自动导入模块 自动%logstart
1. 参考 启动ipython或python解释器自动导入组件(例如:numpy) http://ipython.org/ipython-doc/stable/config/intro.html#se ...
随机推荐
- 【Java SE】Day03流程控制语句
一.流程控制(顺序结构) 二.选择结构 1.多分支中case的穿透性 2.switch的括号可以是 基本/引用类型(String.enum枚举) 三.循环结构 for循环结束后内存消失,效率高 四.扩 ...
- 什么是JS?JS的用途?
一.JavaScript是什么?它有什么作用? JavaScript是一种运行在客户端的脚本语言,简称JS,属于解释性语言.它是一行翻译执行完以后再进行下一行,代码不进行预编译. JavaScript ...
- 一文带你入木三分地理解字符串KMP算法(next指针解法)
1. KMP算法简介 温馨提示:在通篇阅读完并理解后再看简介效果更佳 以下简介由百度百科提供https://baike.baidu.com/item/KMP%E7%AE%97%E6%B3%95/109 ...
- 如何用3D流体实现逼真水流效果?
华为应用市场在2022年HDC大会期间发布了一款3D水流主题,基于华为HMS Core Scene Kit服务能力,展现立体灵动的水流岛屿,可跟随用户指尖实现实时流体波动效果,既趣味又解压. 让变幻莫 ...
- 【译】2022 年回顾:Web 性能有哪些新变化?
原文地址:https://www.debugbear.com/blog/2022-in-web-performance 若对文中提到的一些性能参数不太熟悉,可以参考我之前的一篇博文<性能参数和优 ...
- 希腊字母表及latex代码
希腊字母表及latex代码 字母大写 字母小写 英文名称 latex大写代码 latex小写代码 \(\Alpha\) \(\alpha\) alpha \Alpha \alpha \(\Beta\) ...
- Python实验报告(第2章)
实验2:Python语言基础 一.实验目的和要求 1.了解Python的编写规范要求: 2.了解Python的基本数据类型: 3.学会使用Python的五种运算符: 4.掌握Python的基本输入和输 ...
- 痞子衡嵌入式:Farewell, 我的写博故事2016-2019
-- 题图:苏州天平山枫叶 现在是 2022 年末,痞子衡又要起笔博文年终总结了,看着 2020 年之前的博文总结缺失,始终觉得缺憾,所以写下此篇 2016 - 2019 总结合辑.2016 年之前, ...
- 一个小而美的 C 语言项目
我最近在学习 C 语言,看的一本书叫做 <C Primer Plus>,这本书对 C 语言的描写.特性介绍.代码示例都介绍的比较详细,是小白入门 C 语言非常不错的一本书,还有一本经典书叫 ...
- Potree 003 基于Potree Desktop创建自定义工程
1.第三方js库 第三方库js库选择dojo,其官网地址为https://dojotoolkit.org/,git地址为https://github.com/dojo/dojo,demo地址为http ...