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

最新推荐文章于 2024-08-19 18:04:39 发布
最新推荐文章于 2024-08-19 18:04:39 发布
阅读量864 收藏 5
点赞数 9
CC 4.0 BY-SA版权
分类专栏： Vue3开源组件实战 文章标签： vite vue3 element plus tsx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/felix_alone2012/article/details/140803374

前面我们进行了开源组件的自研，很多组件可直接用现成的开源组件库，并不需要自己重复造轮子，为此我们讲如何在当前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元/天 解锁文章
vue3+tsx+element-plus封装组件总结
weixin_43900374的博客
01-17 2671
自从vue3出来之后，舍弃了很多方式，比如支持tsx，额，不解释了，我也是差不多知道意思，更详情的问度娘，我这里讲的就是主要tsx开发的时候碰到的一些问题还有vue3开发的一点总结，后续还会继续补充。在input.tsx中主要是以下代码。
vue3+vite+ts 按需自动导入 Element Plus，以及遇到的问题
weixin_50865103的博客
06-11 3467
如果没有auto-imports.d.ts，可以添加一个element-plus.d.ts 文件，并在tsconfig.json文件中引入element-plus.d.ts。遇到这一个问题之后，通过搜索发现，unplugin-vue-components@0.26.0版本太高了，降低版本就可以。在tsconfig.json文件中引入auto-imports.d.ts。element-puls.d.ts文件中的内容。使用 ElMessage与ElLoading 的时候出现。
在Vue3中使用 tsx / jsx + 插槽 （element-plus中的tsx写法与插槽）
m0_64130892的博客
07-10 6737
​在Vue3中使用 tsx / jsx + 插槽 （element-plus中的tsx写法与插槽） 今天在学习使用element-plus的虚拟化表格时，遇到了一个问题，就是需要在表格项中自定义渲染内容（比如渲染一个Tag标签，渲染一个下拉框组件等） 可见官网示例：Virtualized Table 虚拟化表格 | Element Plus (element-plus.org)。在组件标签中有个v-slots属性，给里面传入一个对象，键是插槽名，值是render函数。
element plus按需导入的坑
akatukijohi的博客
04-12 3728
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 2945
在element-plus虚拟化表格中使用tsx和slot插槽自定义渲染单元格为el-popconfirm
关于Element-plus按需引入的一些坑-1
a1831511974的博客
11-15 4974
在使用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..
从零开始创建一个vue3+vite项目并集成element-plus、eslint以及prettier
ruan479118658的博客
04-03 2251
ESLint 是一个用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具，其目标是使代码更加一致并避免错误。ESLint 是完全插件化的。每条规则都是一个插件，你可以在运行时添加更多。你还可以添加社区插件、配置和解析器来扩展 ESLint 的功能。
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-10
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件,企业级中后台解决...
按需自动导入 element-plus
xiabin_2020的博客
05-18 622
jsconfig.json 【针对路径别名，设置对应配置项】
ElementPlus按需引入
最新发布
qq_59625204的博客
08-19 1554
对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 2695
最近做毕设，准备用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 1201
最近研究了一下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...
Vite创建的Vue3项目按需导入(自动导入) Element Plus 样式错误以及编译器报错的问题
Aiden的笔记本
02-27 2978
在Vite构建的Vue3项目中，可以通过官方推荐的自动导入的方法，方便地使用Element Plus，这样不需要在每一个Vue中手动import，而且基于按需导入的自动导入打包时效率也会更高。但是，不当的使用可能会导致ElMessage，ElNotification 等组件的样式丢失，不经过很好的配置，可能会出现虽然正确使用，但编译器报错的问题。这篇文章主要讲解如何正确引入Element Plus，以及解决上述两个常见的问题。
ElementPlus按需导入的问题
m0_55584065的博客
09-04 396
今天使用了ElmentPlus的按需自动导入，发现在使用自动导入之后 Message消息提示 和 Message Box 消息弹出框 这两个组件的样式就消失了，后来找了很多文章才知道自动导入本身存在这个问题，官方文档上也没有给出解决的方法，这里提供一种解决的方法，就是把按需引入的自动引入和手动引入都用上，然后就可以解决了。照着上面的命令和配置文件进行操作，然后。就可以了，一定要记得重启项目！
vue3中elemnt plus按需引入总结
weixin_42705100的博客
03-13 1120
element plus 按需引入总结，像全局引入一样只需配置一次，开发中要用到什么组件无需单个引入。既能解决项目打包的体积问题，又能省去不少代码，无需再次解构。
解决element plur的icon图标的无法按需引入的问题
m0_68320270的博客
09-20 957
/element 组件的按需引入。再说一些组件使用注意的问题吧。//按需引入icon图标组件。//安装icon图标组件。
vue3引入element-plus
m0_63040701的博客
06-01 349
element-ui配置按需引入和全局引入。
vite 搭建组件库，实现按需引入
05-26
3. 在项目根目录下创建一个名为 `vite.config.js` 的文件，并在其中配置按需引入的插件，如 `style-import` 插件和 `babel-plugin-import` 插件 4. 在组件库中使用 `export` 关键字将组件导出，在需要使用组件的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Java小卷

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

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

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

打赏作者

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

抵扣说明：

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

余额充值