Vue3.0 + Ts 项目使用element-plus 自动按需导入 使用v-loading报错

最新推荐文章于 2025-04-24 08:33:51 发布
原创 最新推荐文章于 2025-04-24 08:33:51 发布
· 2.5k 阅读 · 4 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #typescript #elementui

在Vue3.0结合TypeScript的项目中，使用element-plus时遇到v-loading指令报错，找不到对应样式。解决方法是通过正则表达式排除loading-directive样式，并展示了解决后的正常效果。用户可以进一步自定义加载中组件的显示内容，参考element-plus官方文档。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题展示：

使用v-loading报错 无法找到样式 element-plus/es/components/loading-directive/style/css
在这里插入图片描述

解决办法：

element-plus版本：

"element-plus": "^2.1.9"

 "unplugin-auto-import": "^0.7.1",
 "unplugin-vue-components": "^0.19.3"

使用正则表达式，排除loading-directive的样式 exclude: new RegExp(/^(?!.loading-directive).$/)

 configureW
最低0.47元/天 解锁文章
vue3+ts+vite+pinia+element-plus搭建一个项目
cyj0919的博客
08-19 750
创建一个基于Vue 3、TypeScript、Vite、Pinia和Element Plus的项目是一个现代化的前端开发流程，这种配置通常用于构建轻量级、快速和模块化的单页应用程序（SPA）。是Vue.js的最新主要版本，提供了Composition API、更好的TypeScript支持、自定义渲染器等功能。是JavaScript的一个超集，添加了类型系统和基于类的面向对象编程。它能够提供更好的代码编辑支持和更早发现运行时错误，特别是在大型项目中。
element plus 使用v-loading报错解决Can‘t resolve ‘element-plus/es/components/loading-directive/style/index‘
山野里的小菊花
06-02 7584
This dependency was not found: * element-plus/es/components/loading-directive/style/index in ./node_modules/unplugin/dist/webpack/loaders/transform.js??ref--34-0!./node_modules/unplugin/dist/webpack/loaders/transform.js??ref--35-0!./node_modules/cache-loa
ElementPlus按需自动引入配置详解
最新发布
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
04-24 650
有很多插件没用上，浪费资源，打包会更大用什么引用什么，操作冗余用到什么就引入什么，只需要简单配置，灵活机动，因此本文主要介绍。
vue3中使用element-plus的v-loading失效问题
2301_78419762的博客
01-24 4379
在main.js中导入ElLoading组件，并在app应用实例挂载app.mount之前加上一条指令注册语句，然后v-loading指令就能正常使用了main.js//main.jsimport { ElLoading } from 'element-plus'//【新增】app.directive('loading',ElLoading.directive)//【新增】解决成功。
vue3+element-plus，在el-dialog中使用v-loading无效的解决方法
m0_61480985的博客
03-18 6870
在使用el-dialog的时候，想要实现点击弹框，出现加载中的效果
vue3+vite3.0 在 el-table 中使用 v-loading 后，控制台报错
weixin_42606371的博客
07-29 2068
vue3+vite3.0在el-table中使用v-loading后，控制台报错。
element-plus 自动导入 使用 v-loading 无法找到样式 element-plus/es/components/loading-directive/style/css 问题解决
HHH917的博客
02-24 5450
查找解决方法及当前使用版本 当前版本 "element-plus": "^2.0.2", "unplugin-auto-import": "^0.6.1", "unplugin-vue-components": "^0.17.20" 查找解决方法 先去GitHub 查 element-plus/issues/4855 发现里面的解决方式还不是很好，结合vs-code 查看 ElementPlusResolver 函数的源码声明 发现有exclude 属性 解决方法 使用正则表达式 排除load
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+Ts+Element-plus中局部loading的hooks
WebCaiNiao_Lcn的博客
03-28 2274
vue3+Ts+Element-plus中局部loading的hooks
Vue3+ElementPlus+TS
ianutt的博客
09-06 1572
Vue3
elementplus 中v-loading 在滚动页面中的显示
weixin_55257510的博客
07-10 977
使用element的框架，当有滚动页面的时候，loading的遮罩层会随着滚动条移动。由CSS可知，遮罩层div是使用绝对坐标，固定在页面上，不会随着滚动而移动。在窗口中添加一个div，专门负责显示loading遮罩层。遮罩层会随着滚动上移，非常难看。
学习vue3+ts中，element+plus自动加载+Lodging加载以服务器方式调用不生效
Ccyu86的博客
04-12 841
然后发现不生效，根据大佬提供的办法，引入官网提供的logding后还需要再引入logding的css才生效。添加了官网 提供的配置。
Element Plus组件库v-loading指令在el-dialog组件上使用无效
u011669024的博客
12-03 2244
公司经常需要做一些后台管理页面，我们选择了Element Plus，它是基于 Vue 3，面向设计师和开发者的组件库，Element Plus组件v-loading在el-dialog组件上使用无效?
Vue3+Ts+Vite项目(第二篇)——引入Element-Plus并配置组件按需自动导入
做笔记/记录遇到的前端bug
07-09 5309
Vue3+TypeScript+Vite项目中，手把手带你完成引入Element-plus组件库，完成组件的按需自动导入配置和 el-icon 的引入
element-plus自动引入组件报错，例如collapse、loading
bigbigpigsobig的博客
10-07 474
将vue放在第一个。
v-loading（vue3 总结）
qq_38210427的博客
08-26 527
添加自定义图标&::before{接口使用调节样式：可以吧tableLoading.value = false 注释，调节他的位置。
VUE3:自定义loading指令
qq_45820271的博客
04-15 1648
在vue3中自定义一个加载中指令
element-plus 引用loading编译不通过解决方案【迷糊小苦瓜 -掘金同名】
weixin_44036553的博客
04-01 3070
安装element-plus自动引入后再使用loading时出现css文件引入问题导致编译不通过时解决方案
element-plus按需自动引入图标
01-17
element-plus是一个基于Vue3的UI组件库，它具有灵活的可配置性和丰富的组件选择。其中，element-plus引入图标时采取了按需自动引入的方式，这意味着在使用组件时只会引入所需的图标，而不会加载整个图标库，从而减小项目的体积和提升页面加载速度。 在使用element-plus的组件时，如果需要使用到图标，只需要在组件中指定相应的图标名称即可，element-plus会自动根据需要引入该图标所对应的图标库，而无需手动引入整个图标库或者单独引入每一个需要的图标。 这种按需自动引入图标的方式不仅简化了开发者的使用流程，同时也减少了不必要的资源加载，提升了网页性能和用户体验。 总之，element-plus采用了按需自动引入图标的策略，为开发者提供了更加便捷和高效的开发体验，提升了项目性能和可维护性。这也是element-plus作为UI组件库的一大亮点之一。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值