Vue3+Element Plus按需引入(自动导入)详解

更新时间：2022年10月19日 16:39:44 作者：YanaDH

element-plus根据官网文档,推荐用户采用按需导入的方式进行导入,下面这篇文章主要给大家介绍了关于Vue3+Element Plus按需引入(自动导入)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

1 前言

1.1 目的

Element Plus 使用按需引入，大大缩小打包后的文件大小

1.2 最终效果

自动生成 components.d.ts 文件，并在文件中引入 Element Plus 组件

自动生成 components.d.ts 文件，并在文件中引入 Element Plus API

2 准备工作

安装 Element Plus

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

3 按需引入

3.1 安装插件

组件按需引入所需插件：unplugin-auto-import 、 unplugin-vue-components
图标按需引入所需插件：unplugin-auto-import 、 unplugin-icons

只需要安装到开发环境

$ pnpm i unplugin-auto-import unplugin-vue-components unplugin-icons -D

3.2 修改 vite.config.ts 文件

4 其他

4.1 ELMessage 弹框样式未生效

需手动导入 ElMessage 对应样式，只使用组件 API 导致的样式失效问题可尝试相同处理方法

// 示例
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'

4.2 图标使用

注意，-ep- 是 vite.config.ts 文件中配置的，必须保持一致

<!-- 直接使用 -->
<i-ep-menu />

<!-- 嵌套使用 -->
<el-icon><i-ep-menu /></el-icon>

总结

到此这篇关于Vue3+Element Plus按需引入(自动导入)的文章就介绍到这了,更多相关Vue3 Element Plus按需引入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue自定义事件(详解)
下面小编就为大家带来一篇Vue自定义事件(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
利用vuex-persistedstate将vuex本地存储实现
这篇文章主要介绍了利用vuex-persistedstate将vuex本地存储的实现，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue+Echarts实现绘制多设备状态甘特图
这篇文章主要为大家详细介绍了Vue如何结合Echarts实现绘制多设备状态甘特图,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
2024-03-03
详解vue中router-link标签所必备了解的属性
这篇文章主要介绍了vue中router-link标签所必备了解的属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
el-popover如何通过js手动控制弹出框显示、隐藏
最近项目中多次用到了Popover弹出框,下面这篇文章主要给大家介绍了关于el-popover如何通过js手动控制弹出框显示、隐藏的相关资料,需要的朋友可以参考下
2023-12-12
Vue3使用vant检索组件van-search遇到的问题小结
当清空按钮与检索按钮同时居右时,点击clear清空按钮事件时会同时触发click-right-icon事件,这个时候容易触发一系列问题,小编小编给大家分享Vue3使用vant检索组件van-search遇到的问题小结,感兴趣的朋友一起看看吧
2024-02-02
vue中mapbox地图显示一半的问题及解决方法
在vue中创建mapbox地图，地图只显示一般，查看浏览器开发者工具，发现将canvas.mapboxgl-canvas 的position:absolute去掉就解决了，今天小编通过本文给大家分享详细过程，感兴趣的朋友跟随小编一起看看吧
2023-07-07
vue3中超好用的插件整理
最近找到几个好用的插件,这里分享一下,下面这篇文章主要给大家介绍了关于vue3中超好用的插件整理,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
详解vue 组件注册
这篇文章主要介绍了vue 组件注册的相关资料，帮助大家更好的理解和学习vue 组件的相关知识，感兴趣的朋友可以了解下
2020-11-11
Vue ECharts直角坐标系配置详细讲解
数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts图表库
2022-12-12