vue 3.0 批量导入全局组件

• 代码环境
  vue 3.0 + vite +ts

• 具体代码
  1、在公共组件文件夹中，新建一个index.ts文件，代码如下:

  import { createApp, defineAsyncComponent } from 'vue'
  export default {
      install: function (app: ReturnType<typeof createApp>): void {
          const modules = import.meta.glob('./*.vue');
          const components = import.meta.globEager('./*.vue');
          Object.keys(modules).forEach((key: string) => {
              const viewSrc = components[key];
              const file = viewSrc.default;
              const AsyncComponent = defineAsyncComponent(modules[key])
              app.component(file.name, AsyncComponent)
          });
      }
  }
  

  上面代码中的 file.name 是对应组件的 name 值，所以组件必须有 name，如：

  <script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
      name:'vHeader'
  })
  </script>
  

  2、在main.ts中引入index.ts文件

  import Components from './components/common/index'
  app.use(Components)
  

  3、在文件中使用

  <template>
  	<vHeader></vHeader>
  </template>
  

• 代码环境
  vue 3.0 + webpack + ts

• 具体代码
  1、在公共组件文件夹中，新建一个index.ts文件，代码如下:

  import { createApp} from 'vue'
  const ctx = require.context('./', false, /\.vue$/)
  export default {
      install: function (app: ReturnType<typeof createApp>): void {
          const arr = ctx.keys().filter((item:any)=> true)
          arr.forEach((item:any)=>{
              const componentConfig = ctx(item)
              const name = item.split("/")[1].replace(/\.vue$/g, '')
              console.log('name', name)
              app.component(name, componentConfig.default || componentConfig)
          })
      }
  }
  

  上面代码中的 name 是对应组件文件名称，例如VHeader.vue

  1、在main.ts中引入index.ts文件

  import Components from './components/common/index'
  app.use(Components)
  

  2、在文件中使用

  <template>
  	<vHeader></vHeader>
  </template>