批量自动化注册全局组件(Vue3)

Posted 2023-03-25

参考技术A 已知 注册全局组件 有两种方法：

一种是直接去 main.js 中引入文件，通过 vue.component('组件名'，组件对象)，导入定义的变量名就是组件对象，组件名是组件的name

第二种是将要全局注册的全部组件文件导入到同一个index.js文件中，通过 install 函数进行分别注册，之后将这个 index.js文 件导入到 main.js 文件中，通过 vue.use 挂载到全局,之后如果又有新的全局组件需要注册，直接引入到 index.js 文件中即可

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

②然后 context 函数会返回一个导入函数 importFn，它又一个属性 keys() 获取所有的文件路径

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

批量自动化注册组件：app是vue3中install函数的参数,以下内容就是写在install函数中

需要注意的是，这里注册完成一样是需要将文件导入到main.js文件中，通过Vue.use进行全局挂载

原理就是：当你在mian.js导入，使用Vue.use() (vue3.0 app)的时候就会执行install函数

Vue自动化注册全局组件脚本

今天有一个idea，vue一些组件，可能会全局都用到，我觉得在main.js写

Vue.component(name, instance)

然后很命令式，写着也不好看，想着能够有一个函数可以指定加载比如components下的文件，自动完成全局化注册，想起来就很帅

放代码：

export function autoLoadingGlobalComponent() {
  const requireComponent = require.context(
    // 其组件目录的相对路径
    ‘../components‘,
    // 是否查询其子目录
    false,
    // 匹配vue后缀文件名的文件
    /.vue$/
  )
  // 遍历获取到的文件名，依次进行全局注册
  requireComponent.keys().forEach(fileName => {
    // 获取组件配置(实例)
    const componentConfig = requireComponent(fileName)
    // 获取组件的 PascalCase 命名(eg: MYHeader)
    const componentName = _.upperFirst(
      // 获取驼峰式命名
      _.camelCase(
        // 剥去文件名开头的 `./` 和结尾的扩展名 eg: ./food-header.vue -> foodHeader
        fileName.replace(/^./(.*).w+$/, ‘$1‘)
      )
    )
      // 全局注册组件
    Vue.component(
      componentName,
      // 如果这个组件选项是通过 `export default` 导出的，
      // 那么就会优先使用 `.default`，
      // 否则回退到使用模块的根。
      componentConfig.default || componentConfig
    )
  })
}