目录1 前言1.1 目的1.2 最终效果2 准备工作3 按需引入3.1 安装插件3.2 修改 vite.config.ts 文件4 其他4.1 ELMessage 弹框样式未生效4.
Element Plus 使用按需引入,大大缩小打包后的文件大小
自动生成 components.d.ts 文件,并在文件中引入 Element Plus 组件
自动生成 components.d.ts 文件,并在文件中引入 Element Plus api
安装 Element Plus
# 选择一个你喜欢的包管理器
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
只需要安装到开发环境
$ pnpm i unplugin-auto-import unplugin-vue-components unplugin-icons -D
需手动导入 ElMessage 对应样式,只使用组件 API 导致的样式失效问题可尝试相同处理方法
// 示例
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/CSS'
注意,-ep- 是 vite.config.ts 文件中配置的,必须保持一致
<!-- 直接使用 -->
<i-ep-menu />
<!-- 嵌套使用 -->
<el-icon><i-ep-menu /></el-icon>
到此这篇关于vue3+Element Plus按需引入(自动导入)的文章就介绍到这了,更多相关Vue3 Element Plus按需引入内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue3+Element Plus按需引入(自动导入)详解
本文链接: https://www.lsjlt.com/news/169723.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0