vue 封装dialog（Vue3+Element Plus按需引入(自动导入)详解）
导读：1 前言 1.1 目的...
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按需引入内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！