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')