【Vue3-ElementPlus】关于v-loading不生效以及控制台输出[Vue warn]: Failed to resolve directive: loading 的问题

$快来品shi!$

---

辛路历程：

  ElementPlus官方文档#Loading加载中使用v-loading实现加载效果，但只字不提v-loading是哪来的，而且因为刚入门，我也不清楚v-loading到底是个什么东西。
  搜索v-loading得到的基本是没有帮助的结果，在痛苦品shi数小时后，才知道原来有个“指令”的东西Vue官方文档#自定义指令，然后又摸索了一段时间，才知道原来v-loading是个自定义指令，但依旧不清楚这个指令要通过什么方式来注册(想想就火大，这shi是真恶心，官方文档写的什么垃圾，对新手完全不友好)

  在Vue中继续找，找到一个与注册指令有关的函数directive，估计这就是我想要的，然后再找找v-loading指令的位置，但找不到，然后想到和它有关联的组件ElLoading，Ctrl+左键点击跳转(我用的IDE是VSCode)，理所当然地出现了我完全看不懂的代码

  但哪怕在这片陌生代码中，我至少发现了关键词install、directive、service，而directive和Vue注册自定义指令用到的函数名一模一样，于是猜想多半就是这玩意儿了。

---

注册自定义指令loading：

在main.js中导入ElLoading组件，并在app应用实例挂载app.mount之前加上一条指令注册语句app.directive('loading',ElLoading.directive)，然后v-loading指令就能正常使用了

main.js

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import { ElLoading } from 'element-plus'//【新增】

const app=createApp(App);
app.directive('loading',ElLoading.directive)//【新增】
app.mount('#app');

---

运行结果：

App.vue

<script setup>
import { ref } from 'vue'
const isLoading=ref(true)
script>

<template>
  <div v-loading="isLoading" element-loading-text="加载中...">
    <p style="font-size:5rem">ABCDEp>
  div>
  <div >
    <p style="font-size:5rem">12345p>
  div>
template>

---

补充：

• 或许ElementPlus#快速开始提到的“自动导入”能够解决这个问题？但可惜我手导的。
• 大概率是有其他解决方法，但我压根就不想再找了。有其他解决方法的欢迎评论补充。

---

未经本人同意不得私自转载。本文发布于CSDN：https://blog.csdn.net/weixin_44733774/article/details/134935153