vue3和ts引入components下文件夹的所有inde.vue

在 Vue 3 中，可以通过以下步骤引入 `components` 文件夹下的所有 `index.vue` 文件：

1. 首先确保 `components` 文件夹下所有的 `index.vue` 文件都已经正确命名和导出。

2. 在 `App.vue` 或者其他需要使用这些组件的页面中，可以使用 `require.context` 方法来自动导入这些组件。

   // 引入 require.context 方法
   const requireComponent = require.context(
     // 组件文件夹的相对路径
     './components',
     // 是否查询子文件夹
     true,
     // 匹配基础组件文件名的正则表达式
     /\/index\.vue$/
   )
   
   export default {
     components: {
       // 遍历所有自动导入的组件
       ...requireComponent.keys().reduce((components, componentPath) => {
         // 获取组件名
         const componentName = componentPath
           .split('/')
           .pop()
           .replace(/\.\w+$/, '')
         // 导入组件
         const component = requireComponent(componentPath).default
         // 添加到 components 对象中
         components[componentName] = component
         return components
       }, {})
     }
   }

上面的代码中，`require.context` 方法接收三个参数：

- 第一个参数是组件文件夹的相对路径。
- 第二个参数是一个布尔值，表示是否查询子文件夹。
- 第三个参数是一个正则表达式，用于匹配组件文件名。

`requireComponent.keys()` 方法返回一个数组，包含匹配到的所有组件文件路径。

然后通过 `reduce` 方法遍历这个数组，将每个组件自动导入并添加到 `components` 对象中。

最后，将 `components` 对象添加到 Vue 实例的 `components` 选项中即可使用。

例如：

   <template>
     <div>
       <HelloWorld />
       <MyComponent />
     </div>
   </template>
   
   <script>
   import HelloWorld from './components/HelloWorld/index.vue'
   import MyComponent from './components/MyComponent/index.vue'
   
   export default {
     components: {
       HelloWorld,
       MyComponent
     }
   }
   </script>

这样就可以在 Vue 3 中自动导入 `components` 文件夹下的所有 `index.vue` 组件了。