vite tsx项目的element plus集成 - 按需引入踩坑

最新推荐文章于 2025-09-11 04:45:31 发布
原创 最新推荐文章于 2025-09-11 04:45:31 发布 · 995 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vite #vue3 #element plus #tsx

前面我们进行了开源组件的自研，很多组件可直接用现成的开源组件库，并不需要自己重复造轮子，为此我们讲如何在当前vite + vitepress + tsx技术整合的项目中实现element plus组件的按需引入，同时解决遇到的一些坑。

安装Element Plus

npm i -S element-plus

插件安装

npm install -D unplugin-vue-components unplugin-auto-import

vite配置

在这里插入图片描述

用到了vitepress来展示组件文档，要在文档的vue页面中使用element组件同样需要配置：

docs/.vitepress/config.ts

最低0.47元/天 解锁文章
vite项目elementPlus图标自动导入
qq_44476779的博客
05-22 888
elementplus提供了一套常用的图标库，在实际使用中我发现有些隐性的问题官方并没有说明，谨以此文章记录使用elementplus自动导入图标中遇到的问题。
按需自动导入 element-plus
xiabin_2020的博客
05-18 674
jsconfig.json 【针对路径别名，设置对应配置项】
在Vue3中使用 tsx / jsx + 插槽 （element-plus中的tsx写法与插槽）
m0_64130892的博客
07-10 7260
​在Vue3中使用 tsx / jsx + 插槽 （element-plus中的tsx写法与插槽） 今天在学习使用element-plus的虚拟化表格时，遇到了一个问题，就是需要在表格项中自定义渲染内容（比如渲染一个Tag标签，渲染一个下拉框组件等） 可见官网示例：Virtualized Table 虚拟化表格 | Element Plus (element-plus.org)。在组件标签中有个v-slots属性，给里面传入一个对象，键是插槽名，值是render函数。
Element Plus 按需导入时组件样式丢失问题解析与解决方案
最新发布
gitblog_00645的博客
09-11 337
在使用 Vue 3 和 Element Plus 进行前端开发时，许多开发者会选择通过 unplugin 插件实现组件的按需导入，以优化项目体积。然而，在这种配置下，开发者可能会遇到一个常见问题：自定义的组件样式在某些情况下会丢失，导致界面显示异常。 ## 问题现象 当开发者使用 unplugin-auto-import 和 unplugin-vue-components 插件按需导入 Ele...
element plus按需导入的坑
akatukijohi的博客
04-12 3849
element plus版本2.1.8，用了官网的方法，靠unplugin-auto-import和unplugin-vue-components实现按需导入后，因为element plus默认是英文，所以要转成中文。 此时，官网给了两个方法： 方法一 在main.js里添加如下代码。如果你是按需导入，千万别用，直接破功变成全局注册了。用了以后打包，包变大了两兆多。 import ElementPlus from 'element-plus' import zhCn from 'element-plus/e
在element-plus虚拟化表格中使用tsx和slot插槽自定义渲染单元格
m0_61395091的博客
07-09 3158
在element-plus虚拟化表格中使用tsx和slot插槽自定义渲染单元格为el-popconfirm
关于Element-plus按需引入的一些坑-1
a1831511974的博客
11-15 4994
在使用vite之后element-plus按需引入用了插件unplugin-vue-components，其中有些问题记录一下。 在使用Elmessage等写在js文件中的反馈提示消息的组件消息时插件识别不到css文件，就会出现如下效果 这时就需要在main.ts中手动引入你所需要的css文件如 import 'element-plus/theme-chalk/el-message.css 如果图省事把css文件全部引入就是这样 import 'element-plus/dist/inde..
精选资源
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
从0-1搭建一个web项目vue3+vite+ts+element-plus(脚手架分析)
共同进步
06-26 1625
ObJack-Admin一款基于 Vue3.3、TypeScript、Vite3、Pinia、Element-Plus 开源的后台管理框架。在一定程度上节省您的开发效率。另外本项目还封装了一些常用组件、hooks、指令、动态路由、按钮级别权限控制等功能。本文主要对packge.json文件进行详解 scripts、dependencies、devDependencies等配置项。
vue3+ts+vite2+element-plus国际化(需要改进)
l244112311的博客
05-22 2641
vue3 element-plus 使用vue-i18n实现国际化(vite版本2.8.0，vue版本3.2.25，vue-i18n版本9.1.10，element-plus(版本2.1.8)组件需要F5刷新页面才能进行切换语言，暂时没找到解决方式，后续再改进了)
ElementPlus按需引入
qq_59625204的博客
08-19 1708
对elementplus组件的手动按需导入
Vue3+Vite+Element-plus搭建组件库并使用Vitepress编辑组件库文档且发布到 npm并且部署 github pages（vitepress文档渲染.vue组件-推荐使用第二种）
热门推荐
wocwin的博客
02-07 1万+
Vue3 + Vite +Ts+Element-plus搭建组件库并使用Vitepress编辑组件库文档且发布到 npm并且部署 github pages;Vitepress编辑基于Element-plus再次封装的Vue3基础组件库文档弃用vitepress-theme-demoblock，使用自己封装的Demo组件
element plus安装引入使用大坑
weixin_45642452的博客
04-28 2721
最近做毕设，准备用vue写前端，自然用到了elementplus,处处踩雷必须记录。 首先是版本对应，vue2对应element-ui,vue3对应element-plus，强行安装只会出错，另外安装的时候需要把已经npm run的项目停下来，否则安装的依赖会因为无法进入package.json而引入失败。 关于使用，由于我的main.ts文件是在创建项目的时候自动生成的，所以它的app声明只有一句 app=createApp(App).use(store).use(router).mount('#app'
基于 vue cli@4.x vue3 + typescript 按需加载element-plus 踩坑日记
m289065365的专栏
10-12 1245
最近研究了一下vue cli@4.5.x + vue3 +typescript 引入elemlent ui 频繁出现报错 个人不建议使用 vue add element 安装会有未知错误发生 以下是我总结出来的调试安装, 发现安装过程不断踩坑. 最后下面4个步骤解决 1. 安装必要依赖 npm install element-plusbabel-plugin-importsass sass-loader@10.1.1 --save-dev 2.配置babel.config.js...
vue3+tsx+element-plus封装组件总结
weixin_43900374的博客
01-17 2777
自从vue3出来之后，舍弃了很多方式，比如支持tsx，额，不解释了，我也是差不多知道意思，更详情的问度娘，我这里讲的就是主要tsx开发的时候碰到的一些问题还有vue3开发的一点总结，后续还会继续补充。在input.tsx中主要是以下代码。
Vite创建的Vue3项目按需导入(自动导入) Element Plus 样式错误以及编译器报错的问题
Aiden的笔记本
02-27 3248
在Vite构建的Vue3项目中，可以通过官方推荐的自动导入的方法，方便地使用Element Plus，这样不需要在每一个Vue中手动import，而且基于按需导入的自动导入打包时效率也会更高。但是，不当的使用可能会导致ElMessage，ElNotification 等组件的样式丢失，不经过很好的配置，可能会出现虽然正确使用，但编译器报错的问题。这篇文章主要讲解如何正确引入Element Plus，以及解决上述两个常见的问题。
ElementPlus按需导入的问题
m0_55584065的博客
09-04 438
今天使用了ElmentPlus的按需自动导入，发现在使用自动导入之后 Message消息提示 和 Message Box 消息弹出框 这两个组件的样式就消失了，后来找了很多文章才知道自动导入本身存在这个问题，官方文档上也没有给出解决的方法，这里提供一种解决的方法，就是把按需引入的自动引入和手动引入都用上，然后就可以解决了。照着上面的命令和配置文件进行操作，然后。就可以了，一定要记得重启项目！
vue3中elemnt plus按需引入总结
weixin_42705100的博客
03-13 1196
element plus 按需引入总结，像全局引入一样只需配置一次，开发中要用到什么组件无需单个引入。既能解决项目打包的体积问题，又能省去不少代码，无需再次解构。
如何按需导入element-plus的按钮
05-28
<think>好的，我需要帮助用户了解如何在ElementPlus中按需导入按钮组件。根据用户提供的引用内容，特别是引用[1]和[3]，ElementPlus推荐使用unplugin-auto-import和unplugin-vue-components插件来实现自动按需导入。用户可能已经知道这些插件的基本概念，但需要具体的步骤指导。首先，我需要确认用户是否已经安装了必要的插件和ElementPlus本身。如果用户还没有安装，需要提供安装命令。接着，配置Vite或Webpack是关键步骤，引用[1]提到了这两个插件的作用，所以需要详细说明如何将它们添加到项目的配置文件中。例如，在vite.config.ts中添加对应的配置项，指定需要自动导入的组件和样式。然后，用户可能不清楚如何在组件中实际使用自动导入的功能。根据引用[2]，在模板中使用组件时，不需要手动导入，但如果是JSX/TSX的话，可能需要手动导入。这里需要强调模板中的使用方式，并给出示例代码，如直接在template中使用<el-button>标签，而无需在script部分导入。 另外，引用[3]提到样式导入的问题，特别是通知类组件如ElMessage的样式不会自动导入，所以需要在main.ts中手动引入全局样式。同时，如果在JSX中使用组件，可能需要手动导入，这点需要特别提醒用户注意，避免出现组件未注册的错误。 还需要注意常见问题，比如用户可能会遇到组件未自动导入的情况，这时候需要检查配置是否正确，或者是否在JSX中使用了未手动导入的组件。此外，如果用户遇到样式问题，确保他们已经在main.ts中添加了全局样式导入。 最后，生成相关问题，帮助用户进一步解决可能遇到的后续问题，比如手动导入组件的方法、处理样式问题、JSX中的使用差异以及如何自定义主题。这些问题覆盖了用户在使用按需导入时可能遇到的各种情况，提供全面的支持。</think>### Element Plus按需导入按钮组件的完整指南 #### 一、前置条件 1. 安装必要依赖： ```bash npm install element-plus @element-plus/icons-vue npm install unplugin-auto-import unplugin-vue-components -D ``` #### 二、配置自动导入插件（Vite示例） 在`vite.config.ts`中添加配置： ```typescript // vite.config.ts import AutoImport from &#39;unplugin-auto-import/vite&#39; import Components from &#39;unplugin-vue-components/vite&#39; import { ElementPlusResolver } from &#39;unplugin-vue-components/resolvers&#39; export default defineConfig({ plugins: [ // ...其他插件 AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ ElementPlusResolver({ // 指定需要自动导入的组件 importStyle: &#39;css&#39;, exclude: new RegExp(/^(?!ElButton).*$/) // 仅导入ElButton组件 }), ], }), ] }) ``` #### 三、模板中使用按钮组件 ```vue <template> <!-- 直接使用无需手动导入 --> <el-button type="primary">自动导入的按钮</el-button> </template> ``` #### 四、手动导入场景（JSX/TSX） ```typescript // 在JSX文件中需要显式导入 import { ElButton } from &#39;element-plus&#39; export default defineComponent({ setup() { return () => ( <ElButton type="success">JSX按钮</ElButton> ) } }) ``` #### 五、样式处理 在`main.ts`中添加全局样式： ```typescript // main.ts import &#39;element-plus/dist/index.css&#39; // 基础样式 import &#39;element-plus/theme-chalk/el-button.css&#39; // 按钮专用样式 ``` #### 六、验证配置是否生效 检查构建产物中是否仅包含按钮相关代码： ```bash npm run build # 检查dist目录中是否只有ElButton相关代码 ``` --- ### 注意事项 1. **组件白名单机制** 通过`ElementPlusResolver`的`exclude`参数控制导入范围[^1] 2. **样式自动导入限制** 通知类组件（如`ElMessage`）需要单独导入样式： ```typescript import &#39;element-plus/theme-chalk/el-message.css&#39; ``` 3. **TypeScript支持** 在`tsconfig.json`中添加类型声明： ```json { "compilerOptions": { "types": ["element-plus/global"] } } ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java小卷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值