[JavaScript知识库]vue3 自动批量注册公共组件

自动批量注册组件

思路分析

• 使用 require 提供的函数 context 加载某一个目录下的所有 .vue 后缀的文件。

• 然后 context 函数会返回一个导入函数 importFn

  • 它有一个属性 keys() 获取所有的文件路径

• 通过文件路径数组，通过遍历数组，再使用 importFn 根据路径导入组件对象

• 遍历的同时进行全局注册即可

具体代码

// 其实就是vue插件，扩展vue功能，全局组件、指令、函数 （vue.30取消过滤器）
// 当你在mian.js导入，使用Vue.use()  (vue3.0 app)的时候就会执行install函数
// 导入library文件夹下的所有组件
// 批量导入需要使用一个函数 require.context(dir,deep,matching)
// 参数：1. 目录  2. 是否加载子目录  3. 加载的正则匹配
//匹配当前文件夹下的所有.vue文件 注册全局组件
const importFn = require.context('./', false, /\.vue$/)
// console.dir(importFn.keys()) 文件名称数组
export default {
  install (app) {
    // 批量注册全局组件
    importFn.keys().forEach(key => {
      // 导入组件
      const component = importFn(key).default
      // 注册组件
      app.component(component.name, component)
    })
  }
}

在main.js中插入组件

// 引入自定义的ui组件库
import XtxUI from '@/components/library/index.js'
createApp(App)
  .use(store)
  .use(router)
  .use(XtxUI)
  .mount('#app')