项目架构：vue3 + vite + directive指令模块封装

主要的API：

• vite 的 `import.meta.glob()`

• vue 的 use()、directive()

• `export default`

有什么更好的建议和方案的话，欢迎留言讨论交流！

当前案例只以 /directive 文件夹仅一层目录文件为演示，需再增加二级文件目录用来表明对应的指令功能范围的话，改为 import.meta.glob('./**.ts') 即可。

/src/directive/highlight.ts

// 样例文件
export default {
  name:'highlight',
  directive:{
    created(el, binding, vnode) {
      // console.log('指令highlight',el, binding, vnode);
    },
    beforeMount(el, binding, vnode) {
      el.style.background = binding.value
      // console.log('beforeMount',vnode);
      
    },
    mounted(v1,v2,v3) {
      // console.log(v1,v2,v3);
    },
    beforeUpdate(a,b,c,prevNode) { //! 第四个参数 prevNode 只在beforeUpdate和updated才有！
      a.style.background = b.value
      // console.log(prevNode,'指令的prevNode');
    },
    updated(v1,v2,v3,v4) {
      // console.log(v1,v2,v3,v4,'有4个参数');
    },
    beforeUnmount(a,b,c) {
      // 当指令绑定的元素 的父组件销毁前调用。  <简单讲，指令元素的父组件销毁前调用>
      // console.log(a,b,c);
    },
    unmounted() {},// 当指令与元素解除绑定且父组件已销毁时调用。
  }
}

/src/directive/index.ts

// const modules = import.meta.glob('./*.ts') // 获取当前目录下的所有同级的 .ts 文件。（不会获取到自身文件）
const modules = import.meta.glob('./**.ts') // 获取当前目录下的所有.ts文件，不管层级有多深。（不会获取到自身文件）
// console.log(modules);


export default {
  install(app){
    for (const path in modules) {
      modules[path]().then((mod) => {
        // console.log(path, mod.default)
        let val = mod.default
        app.directive(val.name, val.directive)
      })
    }
  }
}

/src/directive/index.less'

// 有些指令是需要样式的，所以定义个 index.less(.scss/.css) ，然后引入其他对应指令的样式
// 最后在main.ts 里引入指令模块时，同时也引入该样式文件。

// @import "./ripple.less"; 其他指令所需要的样式，此行代码仅表示 指令样式的封装结构

/src/main.ts

import directives from '@/directive/index' // 引入指令模块
import '@/directive/index.less' // 引入指令样式

// ......
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.use(directives)  // use 使用封装好的指令模块
export default app
// ......

---

深圳找工作中，有木有内推的啊 ~~~~~

提示文章质量过低，请凑行数。。。

提示文章质量过低，请凑行数。。。

提示文章质量过低，请凑行数。。。

提示文章质量过低，请凑行数。。。

提示文章质量过低，请凑行数。。。

提示文章质量过低，请凑行数。。。

---