vue多个组件引入，运用require.context读取文件,简化组件的导入过程,不需要手动一个个地导入它们

// 引入 path 模块
const path = require('path') // path 是 Node.js 内置的模块，用于处理和转换文件路径。

const files = require.context('./', false, /\.vue$/)

const modules = {}
files.keys().forEach((key) => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})

export default modules

    一、注册一个目录下的所有 Vue 组件。这种方法通常用于按需加载组件或在需要动态注册组件时使用。在这段代码中，使用了 `require.context` 方法，这是 Webpack 提供的一个工具，用于创建上下文模块，允许你动态加载模块。

让我们逐行解析这段代码：

1. **引入 `path` 模块**：
   
 

 const path = require('path');

   
   `path` 是 Node.js 内置的模块，用于处理和转换文件路径。

2. **创建一个 `require.context` 实例**：
   

   const files = require.context('./', false, /\.vue$/);

   
   `require.context` 是 Webpack 的 API，创建一个上下文，允许你批量导入模块。
   - 第一个参数 `'./'` 指定搜索的目录，这里是当前目录。
   - 第二个参数 `false` 表示不递归搜索子目录。
   - 第三个参数 `/\.vue$/` 是一个正则表达式，用于匹配 `.vue` 文件。

3. **初始化一个空对象 `modules`**：
   

   const modules = {};

   

4. **遍历上下文中的文件，并动态导入它们**：
      

   files.keys().forEach((key) => {
     const name = path.basename(key, '.vue');
     modules[name] = files(key).default || files(key);
   });

   - `files.keys()` 返回一个数组，包含上下文中所有匹配的文件路径。
   - `forEach` 方法遍历这个数组。
   - `path.basename(key, '.vue')` 去掉文件的扩展名 `.vue`，获取文件名，作为模块的名称。
   - `files(key).default || files(key)` 动态导入文件，`files(key)` 返回文件模块，通常 Vue 组件会在 `default` 属性下，如果没有，则直接使用 `files(key)`。

5. **导出 `modules` 对象**：

   export default modules;

  
   这个 `modules` 对象包含了所有自动导入的 Vue 组件。

### 示例

假设当前目录下有三个 Vue 组件文件：

- `Header.vue`
- `Footer.vue`
- `Sidebar.vue`

那么生成的 `modules` 对象将如下：

{
  Header: /* Header.vue 模块 */,
  Footer: /* Footer.vue 模块 */,
  Sidebar: /* Sidebar.vue 模块 */
}

 

二、页面运用

<template>
  <div>
    <div style="margin-bottom: 30px;"
         v-for="(list,index) in lists"
         :key="index">
      <div class="name">{{ index + 1 }}、{{ list.name }}</div>
      <div class="pre-box"
           :class="{'bg': !list.url}">
        <div v-if="!!lists.length"
             class="ifnormal">
          <component :is="list.componentName"
                     :list="list">
          </component>
        </div>
        <div v-else
             class="ifnull">暂无模板</div>
      </div>
    </div>
  </div>
</template>

<script>

import LargeScreen from '../thumbnailComponents/LargeScreen'
import modules from '../thumbnailComponents/exportModel.js';

export default {
  components: {
    LargeScreen,
    ...modules
  },
  props: {
    lists: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    lists: {
      handler: function (n, o) {
        // console.log(n, 'nnnnn')
      },
      immediate: true,
      deep: true
    }
  },
}
</script>

componentName 为对应组件名称组件名称，如果

         <component :is="list.componentName"
                     :list="list">
          </component> 不理解可自行查看 vue  component 用法

或者下一章节解释 component用法

这段代码有助于简化组件的导入过程，特别是当你有大量组件时，不需要手动一个个地导入它们。谢谢希望对您有所帮助！