1、我要 在 src 下 创建一个叫  library文件夹   里面再建一个  index.js文件  放入下面代码。

// context 函数会返回一个 导入函数 importFn
// 他有一个属性 keys() 获取所有的文件路径
// 通过文件路径数组，通过数组遍历，在使用 importFn 根据路径导入组件对象
// 遍历同时进行全局注册

// context （目标路径，是否加载子目录，加载文件的匹配正则）
const importFn = require.context('./', false, /\.vue$/)

// 注册全局组件 将来这样的组件建议在vue 插件中定义

export default {
    install(app) {
        //  把这个组件设置为全局指令     
        // console.dir(importFn.keys()) 文件名称数组
        importFn.keys().forEach((item) => {
            // 导入组件
            const component = importFn(item).default
            // 注册
            app.component(component.name, component)
        })

        defineDirective(app)
    }
}

// 导入加载失败是展示的图片   这个图片要引入否则会报错
import defaultIMG from '@/assets/images/200.jpeg'

// 定义指令
const defineDirective = (app) => {
    // 图片懒加载 v-lazyload 指令
    // 原理：先存储图片地址不能在src上，当图片进入可视区域，将你存储图片地址设置给图片元素即可
    app.directive('lazyload', {

        mounted(el, binding) {
            // 创建一个观察对象，来观察当前使用 指令的元素
            const observe = new IntersectionObserver(([{
                isIntersecting
            }]) => {
                if (isIntersecting) {
                    console.log('进入可视区');
                    // 停止观察
                    observe.unobserve(el)
                    // 把指令的值设置给el 的src属性 binding.value 就是指令值
                    el.src = binding.value
                    // 处理图片加载失败 onerror 是图片加载失败的事件
                    // load 图片加载成功
                    el.onerror = () => {
                        // 加载失败设置默认图片
                        el.src = defaultIMG
                    }
                }
            }, {
                threshold: 0.01
            })
            // 开启观察
            observe.observe(el)
        },
    })
}

2、我们在 main.js 文件中使用即可。

// 导入自己的ui组件库   然后 use（）使用即可
import UI from '@/library/index.js'
createApp(App).use(store).use(router).use(UI).mount('#app')

3、我们写组件要写到 library 文件夹里面   一定要写 name  name是当前的文件夹名字

<template>
  <div class="box"></div>
</template>

<script>
export default {
  name: "myHeader",  // 一定要写 name  name当前的文件夹名字
   setup() {
    console.log(1);
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 400px;
  height: 400px;
  background-color: red;
}
</style>

 4、图片懒加载指令怎么用呢？

// 就是把之前 img 里面的 src 改为    v-lazyload="图片的路径" 就可以了
<img v-lazyload="v.picture" alt="" />